React插槽的实现

方法一：通过 children获取

class App extends React.Component {
  render() {
    return (
      <div>
          {/* <Header /> */}
          <NavBar>                 //子组件
            <span>aaa</span>
            <span>bbb</span>
            <a href='#'>ccc</a>
          </NavBar>
          <NavBar >
            <span>《</span>
            <span>详情</span>
            <span>更多</span>
          </NavBar>
          {/* <NavBar ></NavBar> */}
      </div>
    )
  }
}
export default App;

子组件

export default class NavBar extends Component {
    render() {
        return (
            <div className='nav-bar'>
                <div className='nav-left'>
                    {this.props.children[0]}    //通过获取父组件传过来的数据下标展示不一样的数据
                </div>
                <div className='nav-center'>
                    {this.props.children[1]}
                </div>
                <div className='nav-right'>
                    {this.props.children[2]}
                </div>
            </div>
        )
    }
}

方法二：通过变量来插入数据 （推荐）

父组件

class App extends React.Component {
  render() {
    return (
      <div>
          <NavBar2 
            leftSlot={<span>aaa</span>}     //使用变量定义3个数据
            centerSlot={<span>bbb</span>}
            rightSlot={<span>ccc</span>}
          />
      </div>
    )
  }
}

子组件

export default class NavBar2 extends Component {
    render() {
        const {leftSlot,centerSlot,rightSlot} = this.props;
        return (
            <div className='nav-bar'>
                <div className='nav-left'>
                    {leftSlot}
                </div>
                <div className='nav-center'>
                    {centerSlot}
                </div>
                <div className='nav-right'>
                    {rightSlot}
                </div>
            </div>
        )
    }
}