在react中如何实现slot插槽的功能呢

react中是没有类似于vue中插槽的功能。但是我们可以试着实现一下（这里就更加体现出react的灵活性了）因为jsx是可以作为数据直接传递给子组件的，而不需要像vue那样提前预留好插槽的位置。所以总的来说，react是根本不需要slot插槽这个功能的。

当然，如果只需要一个插槽的话，可以通过以下两个方法：

//父组件
render() {
    const leftJsx = <span>aaa</span>;
    return (
      <div>
        <NavBar name="" title="" className="">
          <span>aaa</span>
          <strong>bbb</strong>
          <a href="/#">ccc</a>
        </NavBar>

        <NavBar2 leftSlot={leftJsx}
          centerSlot={<strong>bbb</strong>}
          rightSlot={<a href="/#">ccc</a>} />
      </div>
    )
}

（1）通过this.props.children[index]索引值去拿，只不过需要注意所插入内容的先后顺序。

//子组件
render() {
    // this.props.children;
    return (
      <div className="nav-item nav-bar">
        <div className="nav-left">
          {this.props.children[0]}
        </div>
        <div className="nav-item nav-center">
          {this.props.children[1]}
        </div>
        <div className="nav-item nav-right">
          {this.props.children[2]}
        </div>
      </div>
    )
}

（2）通过props传值的形式，因为jsx是可以作为数据直接传递给子组件的。

//子组件
  render() {
    const {leftSlot, centerSlot, rightSlot} = this.props;

    return (
      <div className="nav-item nav-bar">
        <div className="nav-left">
          {leftSlot}
        </div>
        <div className="nav-item nav-center">
          {centerSlot}
        </div>
        <div className="nav-item nav-right">
          {rightSlot}
        </div>
      </div>
    )
  }