关于javascript:react中向组件内部动态传入标签带参数

react中模仿vue的slot插槽：
应用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} 

实例举例

export default class Parent extends Component {  render() {    return (      <div className="parent">        <h3>我是Parent组件</h3>        // 此处的render是下面，类插槽的名称，能够为任意名称        <A render={(name)=><C 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>        // 此处的render是下面，类插槽的名称，能够为任意名称        {this.props.render(name)}      </div>    )  }}class B extends Component {  render() {    console.log('B--render');    return (      <div className="b">        <h3>我是B组件,{this.props.name}</h3>      </div>    )  }}