从 v16.2.0 开始，无法将功能组件转换为错误边界。

React 文档对此很清楚，尽管您可以根据需要随意重复使用它们：

该componentDidCatch()方法的工作方式类似于 JavaScriptcatch {}块，但适用于组件。只有类组件可以是错误边界。在实践中，大多数时候您需要声明一个错误边界组件一次并在整个应用程序中使用它。

还要记住，try/catch块不适用于所有情况。
如果层次结构深处的一个组件尝试更新并失败，则try/catch其中一个父组件中的块将不起作用——因为它不一定与子组件一起更新。

有一种实现可以处理功能组件不存在的功能，例如componentDidCatch和deriveStateFromError。

据作者介绍，它基于 React.memo()。

提议的解决方案深受新 React.memo() API 的启发。

import Catch from "./functional-error-boundary"

type Props = {
  children: React.ReactNode
}

const MyErrorBoundary = Catch(function MyErrorBoundary(props: Props, error?: Error) {
  if (error) {
    return (
      <div className="error-screen">
        <h2>An error has occured</h2>
        <h4>{error.message}</h4>
      </div>
    )
  } else {
    return <React.Fragment>{props.children}</React.Fragment>
  }
})

参考和 API在这里

官方 React 团队未提供功能组件的错误边界支持。我们可以使用 npm 包实现功能组件的错误边界。 https://www.npmjs.com/package/react-error-boundary

如前所述，React 团队还没有实现一个钩子等价物，也没有发布钩子实现的时间表。

npm 上的一些第三方包实现了错误边界挂钩。我发布了react-use-error-boundary，试图从 Preact重新创建一个类似于useErrorBoundary的 API 。