{"componentChunkName":"component---src-templates-components-tsx","path":"/components/error-boundary","webpackCompilationHash":"1daf920fd56dc476eb98","result":{"data":{"markdownRemark":{"description":{"descriptionHtml":"

简单描述 ErrorBoundary 组件。

\n","apiHtml":"

API#

\n

ErrorBoundary#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
PropertyDescriptionTypeRequiredDefaultAlternative
className额外类名string否
"},"tableOfContents":"","frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"type":"Basic Components"},"fields":{"path":"/components/error-boundary/index.en-US.md","slug":"/components/error-boundary","modifiedTime":1576230292795}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"发送验证码组件","type":"基础组件"},"fields":{"slug":"/components/send-code-cn","path":"/components/send-code/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"SendCode","en_US":"SendCode"},"order":1,"subtitle":"Send verification code component","type":"Basic Components"},"fields":{"slug":"/components/send-code","path":"/components/send-code/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"滚动条","type":"基础组件"},"fields":{"slug":"/components/scrollable-bar-cn","path":"/components/scrollable-bar/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ScrollableBar","en_US":"ScrollableBar"},"order":1,"subtitle":"ScrollableBar","type":"Basic Components"},"fields":{"slug":"/components/scrollable-bar","path":"/components/scrollable-bar/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"全屏组件","type":"基础组件"},"fields":{"slug":"/components/full-screen-cn","path":"/components/full-screen/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FullScreen","en_US":"FullScreen"},"order":3,"subtitle":"Full Screen","type":"Basic Components"},"fields":{"slug":"/components/full-screen","path":"/components/full-screen/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/fit-text-cn","path":"/components/fit-text/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"FitText","en_US":"FitText"},"order":2,"subtitle":"Adaptive Text","type":"Basic Components"},"fields":{"slug":"/components/fit-text","path":"/components/fit-text/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"基础组件"},"fields":{"slug":"/components/error-boundary-cn","path":"/components/error-boundary/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ErrorBoundary","en_US":"ErrorBoundary"},"order":5,"subtitle":null,"type":"Basic Components"},"fields":{"slug":"/components/error-boundary","path":"/components/error-boundary/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"适应文本","type":"基础组件"},"fields":{"slug":"/components/button-list-cn","path":"/components/button-list/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"ButtonList","en_US":"ButtonList"},"order":4,"subtitle":"Button Group","type":"Basic Components"},"fields":{"slug":"/components/button-list","path":"/components/button-list/index.en-US.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"权限组件","type":"业务组件"},"fields":{"slug":"/components/authorized-cn","path":"/components/authorized/index.zh-CN.md"}}},{"node":{"frontmatter":{"title":{"zh_CN":"Authorized","en_US":"Authorized"},"order":5,"subtitle":"Authorized Component","type":"Business Components"},"fields":{"slug":"/components/authorized","path":"/components/authorized/index.en-US.md"}}}]},"demos":{"edges":[{"node":{"content":{"content":{"zh-CN":"","en-US":""},"highlightedCode":"
const ErrorComponent = () => {\n  const [fail, setFail] = React.useState(false);\n  \n  if (fail) {\n    throw new Error('This is an error from render.');\n  }\n  \n  return (\n    <div>\n      <span style={{ marginRight: 10 }}>你好</span>\n      <Button onClick={() => { setFail(true) }}>触发报错</Button>\n    </div>\n  );\n};\n\nconst Fallback = ({ error, componentStack }) => (\n  <div>\n    <div>对不起，程序出错了</div>\n    <div>{componentStack}</div>\n  </div>\n);\n\n\nrender(\n  <div>\n    <ErrorBoundary Fallback={Fallback}>\n      <ErrorComponent />\n    </ErrorBoundary>\n    <div style={{ marginTop: 10 }}>不会受影响</div>\n  </div>\n)
"},"code":"\"use strict\";\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\nvar ErrorComponent = function ErrorComponent() {\n var _React$useState = React.useState(false),\n _React$useState2 = _slicedToArray(_React$useState, 2),\n fail = _React$useState2[0],\n setFail = _React$useState2[1];\n\n if (fail) {\n throw new Error('This is an error from render.');\n }\n\n return React.createElement(\"div\", null, React.createElement(\"span\", {\n style: {\n marginRight: 10\n }\n }, \"\\u4F60\\u597D\"), React.createElement(Button, {\n onClick: function onClick() {\n setFail(true);\n }\n }, \"\\u89E6\\u53D1\\u62A5\\u9519\"));\n};\n\nvar Fallback = function Fallback(_ref) {\n var error = _ref.error,\n componentStack = _ref.componentStack;\n return React.createElement(\"div\", null, React.createElement(\"div\", null, \"\\u5BF9\\u4E0D\\u8D77\\uFF0C\\u7A0B\\u5E8F\\u51FA\\u9519\\u4E86\"), React.createElement(\"div\", null, componentStack));\n};\n\nrender(React.createElement(\"div\", null, React.createElement(ErrorBoundary, {\n Fallback: Fallback\n}, React.createElement(ErrorComponent, null)), React.createElement(\"div\", {\n style: {\n marginTop: 10\n }\n}, \"\\u4E0D\\u4F1A\\u53D7\\u5F71\\u54CD\")));","frontmatter":{"title":{"zh_CN":"基本用法","en_US":"Basic Usage"},"cols":null,"order":0,"subtitle":null,"type":null},"fields":{"slug":"/components/error-boundary/demo/basic","path":"/components/error-boundary/demo/basic.md"}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"slug":"/components/error-boundary","demo":"/error-boundary/demo/"}}}