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错误边界内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在 React 中,我们经常需要更新组件的状态（state）,使用 setState 方法是一种常见的方式来实现状态的更新,而在使用 setState 方法时,有两种不同的写法,即对象式和函数式,本文将介绍这两种写法的区别和使用场景,需要的朋友可以参考下2024-03-03
如何使用 React Router v6 在 React 中
面包屑在网页开发中的角色不可忽视,它们为用户提供了一种跟踪其在网页中当前位置的方法,并有助于网页导航,本文介绍了如何使用react-router v6和bootstrap在react中实现面包屑,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要为大家介绍了React Native 资源包拆分实战分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了React如何实现一个高度自适应的虚拟列表，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
React Native 使用Fetch发送网络请求的示例代码
本篇文章主要介绍了React Native 使用Fetch发送网络请求的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
React Native中导航组件react-navigation跨tab路由处理详解
这篇文章主要给大家介绍了关于React Native中导航组件react-navigation跨tab路由处理的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-10-10
这篇文章主要介绍了记React connect的几种写法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家介绍了React Context原理深入理解源码示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家详细介绍了React tsx生成随机验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
React 进入页面后自动 focus 到某个输入框的解决方案
React.js 当中提供了 ref 属性来帮助我们获取已经挂载的元素的 DOM 节点,你可以给某个 JSX 元素加上 ref属性,这篇文章主要介绍了React 进入页面以后自动 focus 到某个输入框,需要的朋友可以参考下2024-02-02
最新评论