react中向组件内部动态传入标签（带参数）

Posted 2021-09-13 万年打野易大师

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