在React函数组件中使用错误边界和errorElement进行错误处理

在React 18中,函数组件可以使用两种方式来处理错误:

  1. 使用 ErrorBoundary

ErrorBoundary 是一种基于类的组件,可以捕获其子组件树中的任何 JavaScript 错误,并记录这些错误、渲染备用 UI 而不是冻结的组件树。

在函数组件中使用 ErrorBoundary,需要先创建一个基于类的 ErrorBoundary 组件,然后将函数组件包裹在其中:

js 复制代码
import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误记录到一个错误报告服务器
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

function MyFunctionComponent() {
  // ...
}

// 使用 ErrorBoundary 包裹函数组件
const WrappedComponent = () => (
  <ErrorBoundary>
    <MyFunctionComponent />
  </ErrorBoundary>
);
  1. 使用 errorElement 属性 (React 18)

在 React 18 中,你可以在根组件上使用 errorElement 属性来指定发生错误时要渲染的 UI。这个属性可以直接在函数组件上使用:

js 复制代码
import React from 'react';

function ErrorUI() {
  return <h1>Something went wrong.</h1>;
}

function MyFunctionComponent() {
  // ...
  return (
    <>
      {/* 组件树 */}
      {errorElement && <ErrorUI />}
    </>
  );
}

// 在根组件上使用 errorElement
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <MyFunctionComponent errorElement={<ErrorUI />} />
  </React.StrictMode>
);

在上面的示例中,如果在 MyFunctionComponent 组件树中发生错误,React 会自动卸载组件树,并替换为传递给 errorElement 属性的 UI。

注意,errorElement 只适用于根组件。如果需要为嵌套的组件树提供错误边界,你仍然需要使用 ErrorBoundary 组件。

总的来说,ErrorBoundary 是一种更通用的错误处理方式,可用于任何组件及其子组件树。而 errorElement 提供了一种更简单的方式来处理根组件中的错误。你可以根据项目的需求选择合适的方式。

相关推荐
知识分享小能手7 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
蓝瑟9 小时前
React 项目实现拖拽排序功能,如何在众多库中选对 “它”
前端·javascript·react.js
小刘不知道叫啥10 小时前
React 源码揭秘 | 合成事件
前端·javascript·react.js
冰万森11 小时前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
千码君201615 小时前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套
小小前端_我自坚强16 小时前
React Hooks 使用详解
前端·react.js·redux
右子16 小时前
React 编程的优雅艺术:从设计到实现
前端·react.js·mobx
Dcc20 小时前
@tanstack/react-query详解 🔥🔥🔥React的异步数据管理神器
前端·react.js
多啦C梦a2 天前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js