react错误边界示例

React中的错误边界是一种组件，可以捕获并处理子组件中发生的JavaScript错误，在渲染过程中显示备用UI而不是崩溃。下面是一个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>Oops! Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

在上面的示例中，我们定义了一个名为`ErrorBoundary`的React组件。当子组件中的JavaScript错误被捕获时，`ErrorBoundary`将显示备用UI而不是崩溃。我们可以将任何组件作为`ErrorBoundary`的子元素来保护它们。例如:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

在上面的示例中，`MyComponent`组件如果发生JavaScript错误，`ErrorBoundary`将会捕获并显示备用UI。