---
url: /docs/guide/usage/linter/rules/react/error-boundaries.md
---

### 功能

验证是否使用错误边界，而不是在 JSX 周围使用 `try`/`catch` 来处理子组件中的错误。

由 React Compiler 提供支持，该编译器每个文件运行一次，并与其他 React Compiler 规则共享。移植自
[`react-hooks/error-boundaries`](https://react.dev/reference/eslint-plugin-react-hooks/lints/error-boundaries)。

### 为什么这是不好的？

React 会延迟渲染组件——在 `try` 块中，子组件尚未完成渲染，因此 `catch` 永远无法捕获其错误；只有错误边界才能捕获这些错误。

### 示例

此规则的**错误**代码示例：

```jsx
function Component(props) {
  let el;
  try {
    el = <Child />;
  } catch {
    return null;
  }
  return el;
}
```

此规则的**正确**代码示例：

```jsx
function Component(props) {
  return (
    <ErrorBoundary fallback={null}>
      <Child />
    </ErrorBoundary>
  );
}
```

## 如何使用

## 版本

此规则在 v1.79.0 中添加。

## 参考