脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React错误边界

React错误边界Error Boundaries

 更新时间：2023年01月29日 11:30:02   作者：-耿瑞-  
错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树

首先 我们先构建出问题的场景

我们创建一个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错误边界内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • ReactRouter的实现方法

    ReactRouter的实现方法

    这篇文章主要介绍了ReactRouter的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-01-01
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React使用有限状态机的实现示例

    React使用有限状态机的实现示例

    本文主要介绍了React使用有限状态机的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • React的事件处理你了解吗

    React的事件处理你了解吗

    这篇文章主要为大家详细介绍了React的事件处理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • React之Hooks详解

    React之Hooks详解

    这篇文章主要介绍了React hooks的优缺点详解，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下， 希望能够给你带来帮助
    2021-09-09
  • react router4+redux实现路由权限控制的方法

    react router4+redux实现路由权限控制的方法

    本篇文章主要介绍了react router4+redux实现路由权限控制的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • React Native性能优化红宝书方案详解

    React Native性能优化红宝书方案详解

    React Native 是Facebook在React.js Conf2015推出的开源框架,使用React和应用平台的原生功能来构建Android和iOS应用,这篇文章主要介绍了React Native性能优化红宝书,需要的朋友可以参考下
    2024-06-06
  • 详解React中父子组件数据传递和修改的方式及原理

    详解React中父子组件数据传递和修改的方式及原理

    这篇文章主要为大家详细介绍了React中父子组件数据传递和修改的方式及原理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • webpack4 + react 搭建多页面应用示例

    webpack4 + react 搭建多页面应用示例

    这篇文章主要介绍了webpack4 + react 搭建多页面应用示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解React中合并单元格的正确写法

    详解React中合并单元格的正确写法

    用表格进行页面布局,页面布局在各种浏览器的的兼容性, 本文主要介绍了详解React中合并单元格的正确写法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01

最新评论