其他分享
首页 > 其他分享> > OHIF记录(五)——关于ErrorBoundary组件

OHIF记录(五)——关于ErrorBoundary组件

作者:互联网

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,
  one rror: PropTypes.func,
  children: PropTypes.node.isRequired,
  fallbackComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.element]),
};

可知ErrorBoundary组件可以传入5个参数,context定义为一个字符串,onResetonError定义为函数,children是子节点,子节点必须要有的。

OHIFErrorBoundary组件返回一个ErrorBoundary组件,return函数的源码如下:

  return (
    <ErrorBoundary
      FallbackComponent={fallbackComponent || ErrorFallback}
      onReset={onResetHandler}
      one rror={onErrorHandler}
    >
      {children}
    </ErrorBoundary>
  );

如果源码执行报错,那么会执行onError对应的代码,即onErrorHandler函数:

const one rrorHandler = (error, componentStack) => {
  console.error(`${context} Error Boundary`, error, componentStack);
  one rror(error, componentStack);
};

如果想添加新的报错功能,就可以在这个函数里边写,在这个函数内部,也可以写一个自定义的报错界面。

总结:如果程序正常运行,那么ErrorBoundary组件将不会显示,就像是没有这个组件一样,但是如果程序报错,那么将会执行这个组件里边的功能。

标签:react,ErrorBoundary,OHIF,OHIFErrorBoundary,PropTypes,error,组件
来源: https://blog.csdn.net/qq_38853948/article/details/116990063