React实现类似vue的具名插槽和匿名插槽

参考文章链接
React中的this.props与Vue中的slot
https://www.jianshu.com/p/d6e2bd342476

父组件

class Login extends PureComponent {
  render () {
    return (
      <div>
        <NavgationBar
          left = { <span>back</span> } // 类似vue的具名插槽
          right = { <span>next</span> }
        >
          {/* 类似vue的匿名插槽 */}
          <div>center</div> 
        </NavgationBar>
      </div>
    )
  }
}

子组件
  render() { 
    const { left, right } = this.props;
    return (
      <div className={style['nav-wrap']}>
        <div className={style['left-item']}>
          { left }
        </div>
        <div className={style['center-item']}>
        // 这里如果传多个匿名的将变成数组需要加下标分别调用,只有一个的话是对象不需要下标
          { this.props.children ? this.props.children : '' }
        </div>
        <div className={style['right-item']}>
          { right }
        </div>
      </div>
    );
  }