关于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>
    )
  }
}