将 ErrorBoundary 应用于没有根组件的反应项目

Question

我的团队正在从 angularjs 迁移到 react 的进度。由于项目不是用 react 启动的，所以它没有根组件。我们开始使用 react-component 将我们的 react 组件插入到 angularjs 中。这些反应组件没有共同的父级。现在我正在尝试将 errorBoundary 应用于我的反应组件。一种明显的方法是用错误边界包装每个组件。这种方法的问题是，稍后编写新的 React 组件的人可能会忘记用错误边界包装新组件。有没有办法将错误边界应用于整个反应组件/

谢谢

Answer 1

您可能遇到一些用户体验和/或性能问题，每个组件都带有错误边界。但是，如果您仍然希望这样做，您可以使用猴子补丁 React.createElement 在渲染之前自动使用错误边界组件包装每个组件。不过，这无疑会导致用户体验非常差，因为您可能只会有一个通用的错误边界，而不是对用户真正有帮助的特定于上下文的边界。

• 我在a talk here 中了解更多信息。
• 还有一个很棒的post from Brandon Dail about this here。

如果您正在寻找有关如何执行此操作的代码示例，here's a monkeyPatchReact function I wrote for React Chaos。您应该能够创建一个函数，传递一个新的 createElement 来覆盖 React 的 createElement，然后调用原始的 React createElement，但将子代包裹在错误边界中。

或者，您可以使用built-in React.Children.map 将每个子项都包含在错误边界中。

希望对您有所帮助。干杯。