世界上最伟大的投资就是投资自己的教育
https://medium.com/@blairanderson/react-v16-new-error-handler-example-d62499117bfa
https://blissful-khorana-41c490.netlify.com/
src/App.js
import React, { Component } from 'react';
import './App.css';
import Broken from './Broken';
import ErrorBoundary from './ErrorBoundary';
class App extends Component {
state = {
counter: 0
}
increment = () => {
this.setState(prevState => ({ counter: prevState.counter + 1 }));
}
decrement = () => {
this.setState(prevState => ({ counter: prevState.counter - 1 }));
}
render() {
return (
<div className="App">
<h1>Hello rails365</h1>
<ErrorBoundary render={ (error, errorInfo) => <p>Error: { error.toString() }</p> }>
<Broken />
</ErrorBoundary>
<div>Counter: { this.state.counter }</div>
<button onClick={ this.increment }>Increment</button>
<button onClick={ this.decrement }>Decrement</button>
</div>
);
}
}
export default App;
src/ErrorBoundary.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ErrorBoundary extends Component {
static propTypes = {
children: PropTypes.oneOfType([
PropTypes.node,
PropTypes.arrayOf(PropTypes.node)
]).isRequired
}
state = {
hasError: false,
error: null,
errorInfo: null
}
componentDidCatch(error, errorInfo) {
this.setState({
hasError: true,
error: error,
errorInfo: errorInfo
})
}
render() {
if (this.state.hasError) {
return <div>{ this.props.render(this.state.error, this.state.errorInfo) }</div>
}
return this.props.children;
}
}
export default ErrorBoundary;
07:141FreeReact 技巧 #1 如何用 netlify 云服务部署 React 应用
05:342FreeReact 技巧 #2 把 React 应用部署到 GitHub Pages
10:293FreeReact 技巧 #3 React-router 教程 part 1
07:394FreeReact 技巧 #4 React-router 教程 part 2
04:525FreeReact 进阶提高免费视频教程 #5 React.PureComponent
02:366FreeReact 进阶提高免费视频教程 #6 Fragment
03:587FreeReact 进阶提高免费视频教程 #7 context(上下文)
02:518FreeReact 进阶提高免费视频教程 #8 高阶组件
08:209FreeReact 进阶提高免费视频教程 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)
05:5810FreeReact 进阶提高免费视频教程 #10 用高阶组件来重构代码
04:3011FreeReact 进阶提高免费视频教程 #11 我最爱的 React 库 - 功能强大的可插入组件(简化代码)
03:0712FreeReact 进阶提高免费视频教程 #12 返回多个组件的正确方式
06:4913FreeReact 进阶提高免费视频教程 #13 netlifyctl 一键部署前端应用
06:3714FreeReact 进阶提高免费视频教程 #14 defaultProps 和 类型检查 PropTypes part 1
09:5715FreeReact 进阶提高免费视频教程 #15 类型检查 PropTypes part 2
11:0816FreeReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)
11:45FreeReact 进阶提高免费视频教程 #17 错误边界和生命周期函数 componentDidCatch
02:3718FreeReact 进阶提高免费视频教程 #18 升级到 16.3
03:5019FreeReact 进阶提高免费视频教程 #19 探索 bind (this) 的写法
06:5020FreeReact 进阶提高免费视频教程 #20 React 16.3 全新的 Context API
09:1921FreeReact 进阶提高免费视频教程 #21 React 16.3 全新的 Context API - 实践
11:3722FreeReact 进阶提高免费视频教程 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践
06:1023FreeReact 进阶提高免费视频教程 #23 对象,数组,可变数据
06:0624FreeReact 进阶提高免费视频教程 #24 React.Children API 和 props.children 讲解
04:5625FreeReact 进阶提高免费视频教程 #25 如何使用 styled-components
07:2926FreeReact 进阶提高免费视频教程 #26 如何使用 styled-components(实践篇)
06:4027FreeReact 进阶提高免费视频教程 #27 你应该使用 redux-form(介绍)
10:3428FreeReact 进阶提高免费视频教程 #28 你应该使用 redux-form(实践篇)
08:5229FreeReact 进阶提高免费视频教程 #29 React Portals(学习方法)
04:2130FreeReact 进阶提高免费视频教程 #30 使用 React Portals 实现 Modal 框(part 1)
07:2631FreeReact 进阶提高免费视频教程 #31 使用 React Portals 实现 Modal 框(part 2)
04:3832FreeReact 进阶提高免费视频教程 #32 使用 React Portals 实现 Modal 框(part 3)
05:3033FreeReact 进阶提高免费视频教程 #33 使用 React Portals 实现 Modal 框(part 4)
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号
ErrorBoundary 组件里面能包裹很多个组件吗?如果同时出错,错误捕获的是哪一个组件的呢?不单独每次用一个 ErrorBoundary 区包裹。这样的话,