react 组件错误边界处理

- 日理万妓 2021-07-24 12:45 431阅读 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 条评论，431人围观）

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

相关阅读

相关 react组件通讯

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

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

相关 React 组件更新优化

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

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

相关 react组件通信

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

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

相关 react组件传值

react组件传值 1.父子组件传值 1.1父传子父组件 import Asign from './view/asign' import

小咪咪/ 2022年09月05日 01:47/ 0 赞/ 202 阅读

相关 React组件API

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

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

相关 React 组件生命周期

在本章节中我们将讨论 React 组件的生命周期。组件的生命周期可分成三个状态： Mounting：已插入真实 DOM Updating：正在被重新渲染

超、凢脫俗/ 2022年02月16日 10:15/ 0 赞/ 356 阅读

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

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

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

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

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

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

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

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

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

相关 react 组件错误边界处理

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

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