javascript - ReactJs:如何从子组件中的错误中恢复？

Question

我正在为我的库构建一个实时代码编辑器，因此，某些组件可能会在呈现时由于无效输入而触发异常。这完全是意料之中的行为。

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

我想要的是一种捕获异常并在组件应该出现的位置显示红色警报的方法。同样，它是一个实时代码编辑器，预计会出现问题。

我找不到解决这个问题的方法。有什么想法吗？

Answer 1

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

不过，由于 React 缓冲 DOM 更新的方式，子组件不会render-ed 在堆栈的更深处，它更像是:

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了解更多详情，但我相信这是目前的情况。