OHIF记录(五)——关于ErrorBoundary组件
在App.js文件里找到App组件的渲染函数render(),可以发现return的第一个组件是ErrorBoundary。
源码:
<ErrorBoundary context="App">
...
</ErrorBoundary>
组件传入了一个参数context
这是react16版本原生的一个组件,是一个错误边界组件,作用是可以在子组件树的任何位置捕获JavaScript错误,并记录这些错误,并显示一个备用UI,ErrorBoundary
定义在’react-error-boundaries’
包里边,使用前要先用npm安装包:
npm install react-error-boundary
然后通过import
导入
import ErrorBoundary from ‘react-error-boundaries’
调用ErrorBoundary
错误边界可以像普通react组件一样。
关于ErrorBoundary
组件的详细介绍可以参考这篇文章:
https://zhuanlan.zhihu.com/p/32848336
在App.js
里的ErrorBoundary
组件是从文件Viewers\platform\ui\src\components\errorBoundary\ErrorBoundary.js
导入的,在这个文件的import
部分有一句 :
import { ErrorBoundary } from 'react-error-boundary';
引入了ErrorBoundary
组件。
通过文件最后一行:
export default OHIFErrorBoundary;
可知App
组件引入的实质是ErrorBoundary.js
创建的函数式组件OHIFErrorBoundary
。
观察OHIFErrorBoundary.propTypes
源码:
OHIFErrorBoundary.propTypes = {
context: PropTypes.string,
onReset: PropTypes.func,
onError: PropTypes.func,
children: PropTypes.node.isRequired,
fallbackComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]),
};
可知ErrorBoundary
组件可以传入5个参数,context
定义为一个字符串,onReset
和onError
定义为函数,children
是子节点,子节点必须要有的。
OHIFErrorBoundary
组件返回一个ErrorBoundary
组件,return函数的源码如下:
return (
<ErrorBoundary
FallbackComponent={fallbackComponent || ErrorFallback}
onReset={onResetHandler}
onError={onErrorHandler}
>
{children}
</ErrorBoundary>
);
如果源码执行报错,那么会执行onError
对应的代码,即onErrorHandler函数:
const onErrorHandler = (error, componentStack) => {
console.error(`${context} Error Boundary`, error, componentStack);
onError(error, componentStack);
};
如果想添加新的报错功能,就可以在这个函数里边写,在这个函数内部,也可以写一个自定义的报错界面。
总结:如果程序正常运行,那么
ErrorBoundary
组件将不会显示,就像是没有这个组件一样,但是如果程序报错,那么将会执行这个组件里边的功能。