React错误边界Error Boundaries
首先 我们先构建出问题的场景
我们创建一个react项目
然后在src下创建 components 文件夹目录
在下面创建一个 error.jsx 组件
参开代码如下
import React from "react";
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
{ null.bingt }
</div>
)
}
}
这时 就会有人说了 你这 null.bingt 不是摆明会报错吗？
没错 我们要的就是报错
找到src下的 App.js 编写代码如下
import './App.css';
import React from "react";
import Error from "./components/error";
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
<span>你好</span>
<Error/>
</div>
)
}
}
运行之后 控制台直接报错 界面白屏 但其实 App组件上还有个你好啊 说明 整个项目都没渲染出来
直接白屏 版本低一点的react还会出现报错的专门的界面 但在上线之后 客户看到的就是一片空白
但我们想 因为一个组件报错 导致整个项目都运行不起来 这合理吗？
显然是不合理的
此时 我们可以在 components 目录下创建 ErrorBoundary.jsx组件
参考代码如下
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;
}
}
此时 我们的一个捕获错误的组件就写好了
然后 改写 src下的 App.js
代码如下
import './App.css';
import React from "react";
import Error from "./components/error";
import ErrorBoundary from "./components/ErrorBoundary";
export default class App extends React.Component{
constructor(props){
super(props);
this.state = {
}
}
render(){
return (
<div>
<span>你好</span>
<ErrorBoundary render ={ (error,errorInfo) => <p>{ '加载时发生错误' }</p>}>
<Error/>
</ErrorBoundary>
</div>
)
}
}
此时 我们将ErrorBoundary捕获报错的组件 套在了Error外面
然后 编写 当报错时 就渲染
{ ‘加载时发生错误’ }
运行结果如下
控制台依旧会输出报错信息 但 将不会运行到其他组件的渲染 而且 我们指定报错后 渲染的
{ ‘加载时发生错误’ }
也成功渲染出来了
就是 之后我们指定可能某个组件 会报错 就可以用这个组件套一下 避免一个组件报错 整个项目白屏的情况
到此这篇关于React错误边界Error Boundaries的文章就介绍到这了,更多相关React错误边界内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在现代Web应用程序中，网络连接是至关重要的，通过监听网络状态，我们可以为用户提供更好的体验，例如在断网时显示有关网络状态的信息，本文将介绍如何使用React监听网络状态的变化，并提供相应的代码示例2023-06-06
React Native 集成jpush-react-native的示例代码
这篇文章主要介绍了React Native 集成jpush-react-native的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了React+CSS 实现绘制横向柱状图，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧2022-10-10
react-native 封装视频播放器react-native-video的使用
本文主要介绍了react-native 封装视频播放器react-native-video的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了react移动端二级路由嵌套的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
近年来，随着移动端对数据可视化的要求越来越高，通过 WebView 在移动端使用 Echarts 这样功能强大的前端数据可视化库，是解决问题的好办法。下面就和小编来一起学习一下吧2019-05-05
解决React报错Parameter 'props' implicitly&nb
这篇文章主要为大家介绍了React报错Parameter 'props' implicitly has an 'any' type的解决处理方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下2023-03-03
React不使用requestIdleCallback实现调度原理解析
这篇文章主要为大家介绍了React不使用requestIdleCallback实现调度原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
最新评论