props.children使用

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

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

class Card extends Component {
  render () {
    return (
      

        

          {this.props.content}
        
      
    )
  }
}

ReactDOM.render(
  
      
React.js
       
开源、免费、专业、简单
      订阅：
    

} />, document.getElementById('root') )

但是这样写明显太丑。

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

class Card extends Component {
  render () {
    return (
      

        

          {this.props.content}
        
      
    )
  }
}

ReactDOM.render(
  
    

      
React.js
       
开源、免费、专业、简单
      订阅：
    
  ,
  document.getElementById('root')
)

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

props.children 是一个数组

使用如下:

class Layout extends Component {
  render () {
    return (
      

        

          {this.props.children[0]}
        
        

          {this.props.children[1]}
        
      
    )
  }
}