28. React - render props

如何向组件内部动态传入带内容的结构（标签）？

Vue中：
  使用slot，也就是通过组件标签体传入结构体<A><B/></A>

React中：
  1.使用children props: 通过组件标签体中传入结构
  <A>
    <B>xxxx</B>
  </A>

  class B extends Component{
    render(){
      <div>{this.props.children}</div>
    }
  }

  2.使用render props: 通过组件标签属性传入结构，而且可以携带当前组件中的参数，一般用render函数属性

  <A render={ data => <C data={data} /> } />
  A组件：{ this.props.render(内部state数据) }
  C组件：读取A组件传入的数据显示 { this.props.data }
  在B组件中引入{ this.props.render(data) }
  render props的优点在于:
    当你在A组件中插入了B组件，又想在B组件中引入C组件，但是此时的C组件是在A组件页面中引入的
    你就可以通过给B组件标签上传入一个方法，通常定义为render，然后在B组件中使用this.props.render()方法
    来生成C组件，此时你可以通过给render方法传参，将B组件中的状态传递给C组件

import React, { Component, Fragment } from 'react'

export default class A extends Component {
    render() {
        return (
            <div style={{ padding: '10px', backgroundColor: 'orange' }}>
                <h3>这是A组件</h3>
                <B render={(name) => { return <C name={name} /> }} />  
                // 通过在A组件中引入B组件，在B组件传入render方法，该方法返回值为C组件，
                // 将B组件状态state中的值通过标签的形式传递给C组件
            </div>
        )
    }
}

class B extends Component {
    state = {
        name: 'tom'
    }
    render() {
        const { name } = this.state;
        return (
            <div style={{ padding: '10px', backgroundColor: 'skyblue' }}>
                <h3>这是B组件</h3>
                {this.props.render(name)}
                // 使用props中接收到的由A组件传递过来的自定义render方法，将state中的name作为参数传入
                // A组件中B标签接收该name参数并作为属性传递给C组件标签
            </div>
        )
    }
}
class C extends Component {
    render() {
        console.log(this.props.name);
        return (
            <div style={{ padding: '10px', backgroundColor: 'grey' }}>
                <h3>这是C组件</h3>
                {this.props.name}
                // 接收到B组件传递过来的参数
            </div>
        )
    }
}

最终效果图如图所示，B组件及C组件均在A组件引入，B组件中的状态作为参数使用A组件传递过来的方法接收，调用时作为参数传递给C组件