[英]ReactJs: How to recover from errors in a child component?
I'm building a live code editor for my library and, because of that, some components may trigger an exception while rendering due to invalid input. 我正在为我的库构建一个实时代码编辑器,因此,由于输入无效,某些组件可能会在渲染时触发异常。 That's a completely expected behavior.
这是一种完全预期的行为。
My problem now is that the entire page crashes when the input is invalid. 我现在的问题是当输入无效时整个页面崩溃。
What I wanted was a way to catch
the exception and show a red alert where the component should be. 我想要的是一种
catch
异常并显示组件应该在哪里的红色警报的方法。 Again, it's a live code editor, things are expected to break. 再次,它是一个实时代码编辑器,事情有望破坏。
I can't find a way around this. 我无法找到解决这个问题的方法。 Any idea?
任何想法?
IME, every render()
implementation must properly handle exceptions while building its component subtree. IME,每个
render()
实现必须在构建其组件子树时正确处理异常。
Due to the way React buffers DOM updates, though, the sub-components are not render
-ed deeper in the stack, it's more like: 但是,由于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'))
..will call Main#render
, which will then queue Child.render
for execution, then execute it either later on the event loop, or on the next tick, etc. ..将调用
Main#render
,然后将Child.render
排队执行,然后在事件循环或下一个tick等处执行它。
This async execution means you can only reliably catch exceptions in a #render
method for the code it executes directly ( think()
), but not what the child component's #render
does. 这种异步执行意味着你只能在
#render
方法中可靠地捕获它直接执行的代码( think()
),而不是子组件的#render
所做的#render
。
I believe this precludes higher-order components from handling arbitrary exceptions (ie program/data errors), though I agree with Filip that this is otherwise a great answer for general (predictable) error handling. 我相信这可以排除高阶组件处理任意异常(即程序/数据错误),但我同意Filip的说法,这对于一般(可预测的)错误处理来说是一个很好的答案。
See React #2461 for more details, but I believe this is the current state of things. 有关更多详细信息,请参阅React#2461 ,但我相信这是当前的状态。
A good point where you can interject is when your creating React elements, via React.render
, React.createElement
, React.cloneElement
: 通过
React.render
, React.createElement
, React.cloneElement
创建React元素时,可以插入的React.cloneElement
:
try {
React.render(<Editor />, container);
} catch (e) {
// Something went wrong. Let's recover.
React.render(<ItsNotMeItsYourComputer />, container);
}
So doing something like this in a global context would help you recover when creating and mounting your editor in the DOM. 因此,在全局上下文中执行此类操作可以帮助您在DOM中创建和安装编辑器时进行恢复。 For better control, however, you would probably want to write either higher-order components or custom controller views which have a specific way of how they create and manage child components, with the added ability to render a generic
Error
view in case things go wrong. 但是,为了更好地控制,您可能希望编写更高阶的组件或自定义控制器视图,这些视图具有如何创建和管理子组件的特定方式,并且在出现问题时可以添加渲染通用
Error
视图的功能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.