【React】React使报错不再白屏

田本初

已于 2024-10-17 14:38:29 修改

阅读量955

点赞数 8

分类专栏： React 文章标签： react.js 前端前端框架

于 2023-12-03 19:11:17 首次发布

本文链接：https://blog.csdn.net/owo_ovo/article/details/134768586

版权

React 专栏收录该内容

40 篇文章 4 订阅

订阅专栏

React 中处理组件错误防止白屏问题

在 React 项目中，某个组件报错时，通常会导致整个页面白屏。可以利用第三方库 react-error-boundary，为报错的组件提供备用方案，从而保证其他组件能够正常显示。

问题重现

如下示例代码中，Head 组件由于未定义的 content 变量报错，导致整个页面白屏：

function Head() {
  // 模拟错误
  return <div>Head --- {content}</div>;
}

export default () => {
  return (
    <>
      <div>下面是标题</div>
      <Head />
    </>
  );
};

现象：

控制台会提示 ReferenceError: content is not defined。
页面出现白屏，所有组件无法正常渲染。

解决方案：使用 `react-error-boundary`

1. 安装依赖

安装 react-error-boundary：

npm i react-error-boundary

2. 包裹可能会报错的组件

使用 ErrorBoundary 组件来包裹可能出现错误的部分。当 Head 组件出错时，ErrorBoundary 会捕获错误并展示自定义的错误提示，而不会影响其他组件的正常渲染。

优化后的代码如下：

import { ErrorBoundary } from "react-error-boundary";

function Head() {
  // 模拟错误
  return <div>Head --- {content}</div>;
}

export default () => {
  return (
    <>
      <div>下面是标题</div>
      {/* 使用 ErrorBoundary 包裹 Head 组件 */}
      <ErrorBoundary fallback={<div>出错了！！！</div>}>
        <Head />
      </ErrorBoundary>
    </>
  );
};