Question

我可以通过实施#name在React中make a class an error boundary。

是否有一种干净的方法可以将功能组件转换为错误边界而不将其转换为类？

或者这是代码味道吗？

Answer 1

有一个实现可以处理功能组件（例如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 here

Answer 2

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

The React docs are clear about that，尽管您可以根据自己的意愿多次重复使用它们：

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

另请注意，try/catch阻止不适用于所有情况 如果层次结构深处的组件尝试更新并失败，则其中一个父项中的try/catch块将不起作用 - 因为它不一定与子项一起更新。

Answer 3

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

Answer 4

如前所述，React 团队有 not yet implemented a hook equivalent，还有 no published timelines 用于钩子实现。

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

如何在功能React组件中使用Error边界？

4 个答案: