React.js 小書 Lesson22 - props.children 和容器類組件

---

React.js 小書 Lesson22 - props.children 和容器類組件

本文做者：鬍子大哈
本文原文：http://huziketang.com/books/react/lesson22

轉載請註明出處，保留原文連接以及做者信息

在線閱讀：http://huziketang.com/books/react

---

有一類組件，充當了容器的做用，它定義了一種外層結構形式，而後你能夠往裏面塞任意的內容。這種結構在實際當中很是常見，例如這種帶卡片組件：

組件自己是一個不帶任何內容的方形的容器，我能夠在用這個組件的時候給它傳入任意內容：

基於咱們目前的知識儲備，能夠迅速寫出這樣的代碼：

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')
)

咱們經過給 Card 組件傳入一個 content 屬性，這個屬性能夠傳入任意的 JSX 結構。而後在 Card 內部會經過 {this.props.content} 把內容渲染到頁面上。

這樣明顯太醜了，若是 Card 除了 content 之外還能傳入其餘屬性的話，那麼這些 JSX 和其餘屬性就會混在一塊兒。很很差維護，若是能像下面的代碼那樣使用 Card 那想必也是極好的：

ReactDOM.render(
  <Card>
    <h2>React.js 小書</h2>
    <div>開源、免費、專業、簡單</div>
    訂閱：<input />
  </Card>,
  document.getElementById('root')
)

若是組件標籤也能像普通的 HTML 標籤那樣編寫內嵌的結構，那麼就方便不少了。實際上，React.js 默認就支持這種寫法，全部嵌套在組件中的 JSX 結構均可以在組件內部經過 props.children 獲取到：

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

把 props.children 打印出來，你能夠看到它實際上是個數組：

React.js 就是把咱們嵌套的 JSX 元素一個個都放到數組當中，而後經過 props.children 傳給了 Card。

因爲 JSX 會把插入表達式裏面數組中的 JSX 一個個羅列下來顯示。因此其實就至關於在 Card 中嵌套了什麼 JSX 結構，都會顯示在 Card 的類名爲 card-content 的 div 元素當中。

這種嵌套的內容成爲了 props.children 數組的機制使得咱們編寫組件變得很是的靈活，咱們甚至能夠在組件內部把數組中的 JSX 元素安置在不一樣的地方：

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>
    )
  }
}

這是一個兩列布局組件，嵌套的 JSX 的第一個結構會成爲側邊欄，第二個結構會成爲內容欄，其他的結構都會被忽略。這樣經過這個佈局組件，就能夠在各個地方高度複用咱們的佈局。

總結

使用自定義組件的時候，能夠在其中嵌套 JSX 結構。嵌套的結構在組件內部均可以經過 props.children 獲取到，這種組件編寫方式在編寫容器類型的組件當中很是有用。而在實際的 React.js 項目當中，咱們幾乎天天都須要用這種方式來編寫組件。

下一節中咱們將介紹《React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性》。