react错误边界组件(Error Boundaries)

支持: react 16.0及其以上

说明:react的错误处理边界其实就是一个组件,并且只处理其children的错误,并且只能是类组件,children中出错误时,如果外面有Error Boundaries,那么错误会被捕获。

使用方法

首先创建一个类组件,并且在里面声明一个新的生命周期函数

class ErrorBoundary extends React.Component {
    constructor(props) {
	    super(props);
		this.state = { hasError: false };
	}
	componentDidCatch(error, info) {
		this.setState({ hasError: true });
	}
	render() {
	}
}

这样就声明了一个错误处理的组件,我们在componentDidCatch这个里面捕获到error和info(这是一个带有componentStack 的key值得object),然后就可以像普通组件一样使用它

<ErrorBoundary>
    <Children />
</ErrorBoundary>

注意: 自从react16起,errors没有被任何错误边界组件捕获的将导致整个react组件树的卸载,

猜你喜欢

转载自blog.csdn.net/Her_smile/article/details/81390680