React.js 小書 Lesson22 - props.children 和容器類組件
轉(zhuǎn)載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
有一類組件，充當了容器的作用，它定義了一種外層結(jié)構(gòu)形式，然后你可以往里面塞任意的內(nèi)容。這種結(jié)構(gòu)在實際當中非常常見，例如這種帶卡片組件：
[圖片上傳失敗...(image-533ac9-1510226923409)]
組件本身是一個不帶任何內(nèi)容的方形的容器，我可以在用這個組件的時候給它傳入任意內(nèi)容：
[圖片上傳失敗...(image-89f2b8-1510226923409)]
基于我們目前的知識儲備，可以迅速寫出這樣的代碼：
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>開源、免費、專業(yè)、簡單</div>
訂閱：<input />
</div>
} />,
document.getElementById('root')
)
我們通過給 Card 組件傳入一個 content 屬性，這個屬性可以傳入任意的 JSX 結(jié)構(gòu)。然后在 Card 內(nèi)部會通過 {this.props.content} 把內(nèi)容渲染到頁面上。
這樣明顯太丑了，如果 Card 除了 content 以外還能傳入其他屬性的話，那么這些 JSX 和其他屬性就會混在一起。很不好維護，如果能像下面的代碼那樣使用 Card 那想必也是極好的：
ReactDOM.render(
<Card>
<h2>React.js 小書</h2>
<div>開源、免費、專業(yè)、簡單</div>
訂閱：<input />
</Card>,
document.getElementById('root')
)
如果組件標簽也能像普通的 HTML 標簽那樣編寫內(nèi)嵌的結(jié)構(gòu)，那么就方便很多了。實際上，React.js 默認就支持這種寫法，所有嵌套在組件中的 JSX 結(jié)構(gòu)都可以在組件內(nèi)部通過 props.children 獲取到：
class Card extends Component {
render () {
return (
<div className='card'>
<div className='card-content'>
{this.props.children}
</div>
</div>
)
}
}
把 props.children 打印出來，你可以看到它其實是個數(shù)組：
[圖片上傳失敗...(image-923da9-1510226923409)]
React.js 就是把我們嵌套的 JSX 元素一個個都放到數(shù)組當中，然后通過 props.children 傳給了 Card。
由于 JSX 會把插入表達式里面數(shù)組中的 JSX 一個個羅列下來顯示。所以其實就相當于在 Card 中嵌套了什么 JSX 結(jié)構(gòu)，都會顯示在 Card 的類名為 card-content 的 div 元素當中。
這種嵌套的內(nèi)容成為了 props.children 數(shù)組的機制使得我們編寫組件變得非常的靈活，我們甚至可以在組件內(nèi)部把數(shù)組中的 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 的第一個結(jié)構(gòu)會成為側(cè)邊欄，第二個結(jié)構(gòu)會成為內(nèi)容欄，其余的結(jié)構(gòu)都會被忽略。這樣通過這個布局組件，就可以在各個地方高度復用我們的布局。
總結(jié)
使用自定義組件的時候，可以在其中嵌套 JSX 結(jié)構(gòu)。嵌套的結(jié)構(gòu)在組件內(nèi)部都可以通過 props.children 獲取到，這種組件編寫方式在編寫容器類型的組件當中非常有用。而在實際的 React.js 項目當中，我們幾乎每天都需要用這種方式來編寫組件。
下一節(jié)中我們將介紹《React.js 小書 Lesson23 - dangerouslySetHTML 和 style 屬性》。
