react 组件错误边界处理

- 日理万妓 2021-07-24 12:45 363阅读 0赞

避免一个组件错误导致整个页面白屏不能使用等情况
    方式一:手写
    	1、创建一个边界组件,将可能发生错误的组件当作插槽,插入边界组件内
    	
    	2、边界组件中使用componentDidCatch生命周期函数,当组件发生错误的时候触发
    		componentDidCatch(err,errInfo)
    		{
    			...
    		}
    	3、插槽在组件中显示
    		this.props.children;
    		
    	4、将错误处理函数当作参数传递给边界组件
    		<边界组件 xx={(?,??)=><p>组件错误</p>}> 
    			<可能错误组件 />
    		</边界组件>
    		
    	5、在边界组件中,处理错误判断,如果错误,使用错误处理函数返回相应内容
    
      方式二:使用第三方库
      	cnpm install -D react-error-boundary
    	
    	import {ErrorBoundary} from 'react-error-boundary'
          <ErrorBoundary
            FallbackComponent={组件名}  错误时渲染的组件,组件接收两个参数字{error,resetErrorBoundary}
            onReset={() => setExplode(false)}		调用resetErrorBoundary后,修正错误时调用的函数
            resetKeys={[explode]}		可选,当错误发生的组件状态,当状态改变后,会重新渲染
          >
            {explode ? <Bomb /> : null}
          </ErrorBoundary>

代码示例:

![在这里插入图片描述][20200708143045360.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]

[20200708143045360.png]: https://img-blog.csdnimg.cn/20200708143045360.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/adf07de83e4d4f88bb124e5db7e215db.png

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关 react组件通讯

React 的组件可以定义为 class 或函数的形式函数组件 <script type="text/babel"> function HelloM

Dear 丶/ 2023年01月13日 01:51/ 0 赞/ 185 阅读

相关 React 组件更新优化

文章目录 1. PureComponent 2. shouldComponentUpdate 2.1 forceUpdate 2.2

「爱情、让人受尽委屈。」/ 2022年12月29日 09:17/ 0 赞/ 182 阅读

相关 React组件的创建、抽离和事件处理

React 组件 React 组件基本介绍创建组件使用函数创建组件使用类创建组件抽离组件事件处理

超、凢脫俗/ 2022年12月28日 07:16/ 0 赞/ 109 阅读

相关 react组件通信

一、状态机setState是一个异步操作 setState用来修改state中的初始状态，但是它异步操作，不能在setState之后马上获取到最新的数据。可以使用setS

末蓝、/ 2022年12月05日 10:20/ 0 赞/ 151 阅读

相关 React组件API

虚拟DOM React之所以快，是因为它不直接操作DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到

悠悠/ 2022年06月16日 13:09/ 0 赞/ 115 阅读

相关 react-native组件ScrollView

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

阳光穿透心脏的1/2处/ 2022年05月24日 06:26/ 0 赞/ 176 阅读

相关 react篇章-React 组件-复合组件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>菜鸟教程 R

叁歲伎倆/ 2021年12月24日 15:33/ 0 赞/ 278 阅读

相关 react系列（20）错误边界：异常捕获

部分 UI 的异常不应该破坏了整个应用。为了解决 React 用户的这一问题，React 16 引入了一种称为 “错误边界” 的新概念。错误边界是用于捕获其子组件树 JavaS

爱被打了一巴掌/ 2021年09月17日 00:20/ 0 赞/ 323 阅读

相关 react-query 查询错误边界处理

让查询知道您希望在发生某些错误后重新呈现时再次尝试 (1)错误边界组件使用react-error-boundary cnpm install

「爱情、让人受尽委屈。」/ 2021年07月25日 01:22/ 0 赞/ 373 阅读

相关 react 组件错误边界处理

避免一个组件错误导致整个页面白屏不能使用等情况方式一:手写 1、创建一个边界组件,将可能发生错误的组件当作插槽,插入边界组件内

- 日理万妓/ 2021年07月24日 12:45/ 0 赞/ 364 阅读