render props和Error boundary(错误边界)

4. render props和Error boundary(错误边界)

4.1 render props

如何向组件内部动态传入带内容的结构(标签)?

Vue中: 
	使用slot技术, 也就是通过组件标签体传入结构  <A><B/></A>
React中:
	使用children props: 通过组件标签体传入结构
	使用render props: 通过组件标签属性传入结构,而且可以携带数据，一般用render函数属性

children props

<A>
  <B>xxxx</B>
</A>
{this.props.children}
问题: 如果B组件需要A组件内的数据, ==> 做不到 

render props

<A render={(data) => <C data={data}></C>}></A>
A组件: {this.props.render(内部state数据)}
C组件: 读取A组件传入的数据显示 {this.props.data} 

import React, {Component} from 'react';
import './index.css'
import C from '../1_setState'

class Parent extends Component {
    render() {
        return (
            <div className='parent'>
                <h3>我是Parent组件</h3>
                {/*相当于插槽*/}
                {/*<A render={(name)=><C name={name}/>}/>*/}
                <A render={(name)=><B name={name}/>}/>
            </div>
        );
    }
}

class A extends Component {
    state = {name: 'tom'}
    render() {
        console.log(this.props)
        const {name} = this.state
        return (
            <div className='a'>
                <h3>我是A组件</h3>
                {this.props.render(name)}
                {/*<B/>*/}
            </div>
        );
    }
}


class B extends Component {
    render() {
        console.log('B---render')
        return (
            <div className='b'>
                <h3>我是B组件, {this.props.name}</h3>
            </div>
        );
    }
}

export default Parent;

4.2 Error boundary(错误边界)

理解：

错误边界(Error boundary)：用来捕获后代组件错误，渲染出备用页面

特点：

只能捕获后代组件生命周期产生的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误

使用方式：

getDerivedStateFromError配合componentDidCatch

Parent.jsx

import React, {Component} from 'react';
import Child from "./Child";

class Parent extends Component {

    state = {hasError:''}  //用于标识子组件是否产生错误

    // 错误边界适用于打包后的生产环境
    // 当Parent的子组件出现报错时候，会触发GetDerivedStateFromError调用，并携带报错信息
    static getDerivedStateFromError (error){
        console.log(error)
        return {hasError:error}
    }

    componentDidCatch(error, errorInfo) {
        // 一般用作统计错误，反馈给服务器，用于通知编码人员进行bug的修复
        console.log('渲染组件时出错',error)
    }

    render() {
        return (
            <div>
                 <h2>我是Parent组件</h2>
                {this.state.hasError ? <h2>网络不稳定，稍后再试</h2>:<Child/>}
            </div>
        );
    }
}

export default Parent;

Child.jsx

import React, {Component} from 'react';

class Child extends Component {
    state = {
        // users:[
        //     {id:'001',name:'tom',age:18},
        //     {id:'002',name:'cxk',age:19},
        //     {id:'003',name:'zhb',age:20},
        // ]
        users:'abc'
    }
    render() {
        return (
            <div>
               <h2>我是Child组件</h2>
                {
                    this.state.users.map((userObj)=>{
                        return (
                            <h4 key={userObj.id}>{userObj.name}----{userObj.age}</h4>
                        )
                    })
                }
            </div>
        );
    }
}

export default Child;