react如何实现插槽功能

插槽功能的实现

react中是没有类似于vue中插槽功能的（在一定程度上就体现出react的灵活性了）因为jsx代码是可以直接作为数据赋值给变量并最终传递给子组件的，所以不需要像vue那样帮我们实现好插槽这个功能，因此最后总的来说react是根本不需要slot插槽这个功能的，但是我们还是可以试着实现一下：

render() {
    const leftJsx = <span>aaa</span>;
    return (
      <div>
        <NavBar2 leftSlot={leftJsx}
          centerSlot={<strong>bbb</strong>}
          rightSlot={<a href="/#">ccc</a>} />
      </div>
    )
}

只不过需要注意的是：在这里可以使用两种方式去获取到传递过来的props值。

方式一：通过this.props.children[index]的方式去使用，不过因为得需要注意所插入内容的先后顺序，所以不推荐。

//子组件
render() {
    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>
    )
}

方式二：通过解构赋值的方式获取到传递过来的props值，因为不再需要注意使用的顺序，所以推荐使用这种方式。

//子组件
  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>
    )
  }