Question

我正在为我的库构建实时代码编辑器，因此，由于输入无效，某些组件可能会在渲染时触发异常。这是一种完全预期的行为。

我现在的问题是当输入无效时整个页面崩溃。

我想要的是catch异常的方法，并显示组件应该在哪里的红色警报。再次，它是一个实时代码编辑器，事情有望破坏。

我无法找到解决方法。有什么想法吗？

Answer 1

IME，每个render()实现必须在构建其组件子树时正确处理异常。

由于React缓冲DOM更新的方式，子组件不是render - 在堆栈中更深层次，它更像是：

class Main extends React.Component {
  render() { return <div className="wrapper"><Child question={think()} /></div> }
}

class Child extends React.Component {
  render() { return <div className="child-stuff" /> }
}

React.render(<Main answer={42} />, document.getElementById('reactRoot'))

..将调用Main#render，然后将队列 Child.render执行，然后在事件循环或下一个滴答等处执行它。

此异步执行意味着您只能在#render方法中可靠地捕获它直接执行的代码（think()）中的异常，而不是子组件#render的内容确实

我认为这可以排除高阶组件处理任意异常（即程序/数据错误），但我同意Filip的说法，这对于一般（可预测的）错误处理来说是一个很好的答案。

有关详细信息，请参阅React #2461，但我相信这是当前的状态。

Answer 2

您可以通过React.render，React.createElement，React.cloneElement来创建React元素的好处是：

try {
  React.render(<Editor />, container);
} catch (e) {
  // Something went wrong. Let's recover.
  React.render(<ItsNotMeItsYourComputer />, container);
}

因此，在全局上下文中执行此类操作可以帮助您在DOM中创建和安装编辑器时进行恢复。但是，为了更好地控制，您可能希望编写更高阶的组件或自定义控制器视图，这些视图具有如何创建和管理子组件的特定方式，并且具有渲染通用Error视图的附加功能。案件出问题。

ReactJs：如何从子组件中的错误中恢复？

2 个答案: