react-实现错误边界或者错误处理
react 程序出错了怎么办
在 react 中,一旦出错,如果每个组件去处理出错情况则比较麻烦,react 16 新出了错误边界的 api
错误边界
代码摘自react 英文官网
// 先定义一个错误边界组件
class ErrorBoundary extends React.Component {
contructor(props) {
super(props)
this.state = {
hasError: false
}
}
static getDerivedStateFromError(error) {
return {
hasError: true
}
}
componentDidCatch(error, errorInfo) {
logEorroToSever() // 在这里你可以上报异常数据
}
render() {
if(this.state.hasError) {
return <h1>the page has error</h1>
}
return this.props.children
}
}
使用方法:
<ErrorBoundary>
<YourComponent /> // 在这里使用你的页面
</ErrorBoundary>
更多精彩文章可以看我的博客,如有错误,欢迎指正,共同进步