React 错误边界的使用方法

关于React错误边界
在未引入错误边界时，如果组件出现错误则会导致整个页面出现错误，对于用户非常不友好，因此有必要引入错误边界对可能出现错误的元素进行包裹

在React的生命周期函数中有一个componentDidCatch，它能够对子元素的错误进行捕获

componentDidCatch(error,errorInfo)

使用方法：单独创建一个错误边界组件

//ErrorBoundary.jsx
import React from 'react'export default class ErrorBoundary  extends React.Component{constructor(){super()this.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;}
}

在Home页面中引用ErrorBoundary，使用Errorboundary将可能出现错误的组件包裹

import Errorboundary from './Errorboundary.jsx'
import 可能出现错误的组件 from './可能出现错误的组件.jsx'
...
...
...
render(){return(<div><ErrorBoundary render{(error,errorInfo)=><p>{'组件发生错误'}</p>}><可能出现错误的组件/><ErrorBoundary></div>)
}

此时出现错误的话则会在原本组件的位置提示：组件发生错误，
而其他组件依然能够正常运行

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！