React---新扩展RenderProps和ErrorBoundary
React---新扩展RenderProps和ErrorBoundary
一、render props
1.如何向组件内部动态传入带内容的结构(标签)?
Vue中:
使用slot技术, 也就是通过组件标签体传入结构 <AA><BB/></AA>
React中:
使用children props: 通过组件标签体传入结构
使用render props: 通过组件标签属性传入结构, 一般用render函数属性
2.children props
<A>
<B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到
3.render props
<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data}
4.代码
1 import React, { Component } from 'react'
2 import './index.css'
3 import C from '../1_setState'
4
5 export default class Parent extends Component {
6 render() {
7 return (
8 <div className="parent">
9 <h3>我是Parent组件</h3>
10 <A render={(name)=><C name={name}/>}/>
11 </div>
12 )
13 }
14 }
15
16 class A extends Component {
17 state = {name:'tom'}
18 render() {
19 console.log(this.props);
20 const {name} = this.state
21 return (
22 <div className="a">
23 <h3>我是A组件</h3>
24 {this.props.render(name)}
25 </div>
26 )
27 }
28 }
29
30 class B extends Component {
31 render() {
32 console.log('B--render');
33 return (
34 <div className="b">
35 <h3>我是B组件,{this.props.name}</h3>
36 </div>
37 )
38 }
39 }二、ErrorBoundary错误边界
1. 理解：
错误边界：用来捕获后代组件错误，渲染出备用页面
2. 特点：
只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误
3. 使用方式：
getDerivedStateFromError配合componentDidCatch
// 生命周期函数，一旦后台组件报错，就会触发
static getDerivedStateFromError(error) {
console.log(error);
// 在render之前触发
// 返回新的state
return {
hasError: true,
};
}
componentDidCatch(error, info) {
// 统计页面的错误。发送请求发送到后台去
console.log(error, info);
}
4. 代码
（1）child.jsx
1 import React, { Component } from 'react'
2
3 export default class Child extends Component {
4 state = {
5 users:[
6 {id:'001',name:'tom',age:18},
7 {id:'002',name:'jack',age:19},
8 {id:'003',name:'peiqi',age:20},
9 ]
10 // users:'abc'
11 }
12
13 render() {
14 return (
15 <div>
16 <h2>我是Child组件</h2>
17 {
18 this.state.users.map((userObj)=>{
19 return <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
20 })
21 }
22 </div>
23 )
24 }
25 }(2)parent.jsx
1 import React, { Component } from 'react'
2 import Child from './Child'
3
4 export default class Parent extends Component {
5
6 state = {
7 hasError:'' //用于标识子组件是否产生错误
8 }
9
10 //当Parent的子组件出现报错时候，会触发getDerivedStateFromError调用，并携带错误信息
11 static getDerivedStateFromError(error){
12 console.log('@@@',error);
13 return {hasError:error}
14 }
15
16 componentDidCatch(){
17 console.log('此处统计错误，反馈给服务器，用于通知编码人员进行bug的解决');
18 }
19
20 render() {
21 return (
22 <div>
23 <h2>我是Parent组件</h2>
24 {this.state.hasError ? <h2>当前网络不稳定，稍后再试</h2> : <Child/>}
25 </div>
26 )
27 }
28 }