React Js ErrorBoundary 仅适用于主要布局组件，不适用于嵌套组件

Question

我在我的代码中使用错误边界，当我在我渲染主要布局组件的文件中使用它时，它起作用了，例如：

<ErrorBoundary>
<header></header>
</ErrorBoundary>
<ErrorBoundary>
<main/> //this component has an error
</ErrorBoundary>
<ErrorBoundary>
<footer></footer>
</ErrorBoundary>

以上代码有效，并且针对 main 组件中的错误显示回退 UI。但是当我在主组件文件中使用 errorboundary 组件时它不起作用， 无效的错误边界示例：

class main extends React.Component {
//code
<ErrorBoundary>
{object}
</ErrorBoundary>
//more code

这不起作用，整个应用程序崩溃，只显示一个空白页面。为什么会发生这种情况以及如何处理？谢谢。

Answer 1

我明白了。 Errorboundary 捕获组件中的错误。所以它之前没有工作，但是当我在 ErrorBoundary 之间渲染一个错误的组件时，它工作了。

<ErrorBoundary>
<FaultyComponent/>
</ErrorBoundary>

成功了。