ant-design/components/alert/demo/error-boundary.md

order	title
8	[{zh-CN ErrorBoundary} {en-US React 错误处理}]

zh-CN

友好的 React 错误处理 包裹组件。

en-US

ErrorBoundary Component for making error handling easier in React.

import React, { useState } from 'react';
import { Button, Alert } from 'antd';

const { ErrorBoundary } = Alert;
const ThrowError: React.FC = () => {
  const [error, setError] = useState<Error>();
  const onClick = () => {
    setError(new Error('An Uncaught Error'));
  };

  if (error) {
    throw error;
  }
  return (
    <Button type="danger" onClick={onClick}>
      Click me to throw a error
    </Button>
  );
};

ReactDOM.render(
  <ErrorBoundary>
    <ThrowError />
  </ErrorBoundary>,
  mountNode,
);