React使用children渲染子组件方法

    在Vue里, 渲染子组件可以使用slot插槽, 不仅能指定子组件渲染位置, 还能通过指定name属性来有选择地渲染, 但是在React里就没有这种组件了。

    当然, React也不是没有办法实现slot组件的功能, 通常就是用 this.props.children 这个属性:

class Parent extends Component {
  render() {
    return (<div>
      <div>
        这是正常的内容
      </div>
      { //这里渲染子组件
        this.props.children
      }
    </div>)
  }
}

    像这样, 只要在需要渲染子组件的位置加上 this.props.children 那么子组件的内容就回渲染在 '这是正常内容' 的下面, 否则, 父组件是不会渲染子组件的内容的。

    但是又有一个问题, 如果我们还想对子组件传参的话该怎么办呢?显然这样写的话是没办法实现的。

    其中一种办法就是使用redux等状态管理插件来实现, 但是如果你的项目不是特别大的话, 无疑会搞得更复杂, 并且还会增加额外的学习成本。   

    所以我们可以用第二种方法: 使用React自带的React.Children和React.cloneElement这两个个Api。

    借助React.Children, 我们可以这样做, 给子组件传递属性: 

class Parent extends Component {
  render() {
    return (<div>
      <div>
        这是正常的内容
      <