react错误边界

react实际运用中,为了防止某个组件的异常报错,导致整个程序都运行不起来,我们通常封装一个错误的组件:

import React from "react"

export default class ErrorBoundary extends React.Component{
    state = {
        hasError:false,
        error:null,
        errorInfo:null
    }

    /**
     * 子元素发生错误时触发
     */

    componentDidCatch(error,errorInfo){
        this.setState({
            hasError:true,
            error:error,
            errorInfo:errorInfo
        })
    }

    render(){
        if(this.state.hasError){
            return <div>{ this.props.render(this.state.error,this.state.errorInfo) }</div>
        }
        return this.props.children;
    }
}

 

调用,当组件出现错误时,加载render返回的内容

<ErrorBoundary render={ (error,errorInfo) => <p>{ '加载时发生错误' }</p> }>
   <Errors /> {/*出现错误的组件*/}
</ErrorBoundary>

 

posted @ 2020-12-01 21:10  异地大光码  阅读(185)  评论(0编辑  收藏  举报