异常抛出组件
import React, { Component } from 'react';
export default class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = {
flag:false
};
}
//捕获错误
static getDerivedStateFromError(error) {
console.log(error)
return {
flag:true
}
}
render() {
return (
<div>
{this.state.flag?<h1>发生错误....请稍后尝试</h1>:this.props.children}
</div>
)
}
}
全局使用方法
import styles from './index.css';
import ErrorBoundary from '../components/ErrorBoundary';
function BasicLayout(props) {
return (
<div className={styles.normal}>
<h1 className={styles.title}>Yay! Welcome to umi!</h1>
<ErrorBoundary>
{props.children}
</ErrorBoundary>
</div>
);
}
export default BasicLayout;
主要考虑友好的错误，如果一些对象语法报错之后，会出现友好的拦截提示，不过目前无法解决编译出错的拦截，希望各位大佬提出意见。
错误边界：是一个组件，该组件会捕获到渲染期间（render）子组件发生的错误，并有能力阻止错误继续传播
