props.children使用

有一类组件，充当了容器的作用，它定义了一种外层结构形式，然后你可以往里面塞任意的内容。

一般而言可以将代码通过组件属性传递到容器组件中。如下代码所示

class Card extends Component {
  render () {
    return (
      <div className='card'>
        <div className='card-content'>
          {this.props.content}
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Card content={
    <div>
      <h2>React.js</h2>
       <div>开源、免费、专业、简单</div>
      订阅：<input />
    </div>
  } />,
  document.getElementById('root')
)

但是这样写明显太丑。

React.js中，默认支持组件嵌套的写法，上面的代码就可以改造成

class Card extends Component {
  render () {
    return (
      <div className='card'>
        <div className='card-content'>
          {this.props.content}
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Card>
    <div>
      <h2>React.js</h2>
       <div>开源、免费、专业、简单</div>
      订阅：<input />
    </div>
  </Card>,
  document.getElementById('root')
)

在Card组件中，可以通过 props.children 获得嵌套属性

props.children 是一个数组

使用如下:

class Layout extends Component {
  render () {
    return (
      <div className='two-cols-layout'>
        <div className='sidebar'>
          {this.props.children[0]}
        </div>
        <div className='main'>
          {this.props.children[1]}
        </div>
      </div>
    )
  }
}

props.children使用

推荐阅读更多精彩内容