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整个的渲染机制就是React会调用render()函数构建一棵Dom树，在state/props发生改变的时候，render()函数会被再次调用渲染出另外一棵树，重新渲染所有的节点，构造出新的虚拟Dom tree2022-11-11
React手写签名组件react-signature实现签字demo
这篇文章主要为大家介绍了React手写签名组件react-signature实现签字demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12
react进阶教程之异常处理机制error Boundaries
在react中一旦出错,如果每个组件去处理出错情况则比较麻烦,下面这篇文章主要给大家介绍了关于react进阶教程之异常处理机制error Boundaries的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了字节封装React组件手机号自动校验格式FormItem，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在传统的 React 项目里,页面的渲染工作是在浏览器里完成的,而服务器端渲染（SSR）则是让服务器先把 React 组件渲染成 HTML 字符串,再把这个 HTML 字符串发送给浏览器,下面我们就来看看具体实现方法吧2025-03-03
这篇文章主要介绍了如何在 React Native 中添加自定义字体,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
React是现在前端使用频率最高的三大框架之一，React率先提出虚拟DOM的思想和实现，使其保持有良好的性能。本篇文章将对React组件化的入门学习进行讲解，同时针对模块化的思想进行概述，为接下来组件化开发的文章进行知识储备2022-09-09
如何使用 React Native WebView 实现 App&nb
通过 react-native-webview,我们可以轻松实现 App 与 Web 的双向通讯,这种技术非常适合需要在移动应用中嵌入复杂网页功能的场景,感兴趣的朋友一起看看吧2024-12-12
本文主要介绍了React 实现表单组件的示例代码,支持包括输入状态管理,表单验证,错误信息展示,表单提交,动态表单元素等功能,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
本篇文章主要介绍了create-react-app修改为多页面支持的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论