React.Children是頂層API之一，為處理this.props.children這個(gè)封閉的數(shù)據(jù)結(jié)構(gòu)提供了有用的工具。
this.props對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是this.props.children屬性。它表示組件的所有子節(jié)點(diǎn)。
1、React.Children.map
object React.Children.map(object children,function fn [, object context])
使用方法：
React.Children.map(this.props.children,function(child){
????return <li>{child}</li>
})
this.props.children.forEach(function(child){
???return <li>{child}</li>
})
在每一個(gè)直接子級(jí)（包含在 children 參數(shù)中的）上調(diào)用 fn 函數(shù)，此函數(shù)中的 this 指向 上下文。如果 children 是一個(gè)內(nèi)嵌的對(duì)象或者數(shù)組，它將被遍歷：不會(huì)傳入容器對(duì)象到 fn 中。如果 children 參數(shù)是 null 或者 undefined，那么返回 null 或者 undefined 而不是一個(gè)空對(duì)象。
<script type="text/jsx">
var NotesList = React.createClass({
render:function() {
????return (
????????<ol>? {
????????????React.Children.map(this.props.children, function (child) {
????????????????return<li>{child}</li>;
? ? ? ? ? ? ? ? })
? ? ? ? ? }
</ol>);
? ? }
? });
React.render(
????<NotesList>
????????<span>hello</span>
????????<span>hello</span>
????</NotesList>,
????document.body );
</script>
這里需要注意，this.props.children的值有三種可能：如果當(dāng)前組件沒(méi)有子節(jié)點(diǎn)，它就是undefined;如果有一個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類(lèi)型是object；如果有多個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類(lèi)型就是array。所以，處理this.props.children的時(shí)候要小心。
React提供一個(gè)工具方法React.Children來(lái)處理this.props.children。我們可以用React.Children.map來(lái)遍歷子節(jié)點(diǎn)，而不用擔(dān)心this.props.children的數(shù)據(jù)類(lèi)型是undefined還是object。
傳入如下ReactElement：
<NotesList>
????<span>hello</span>
????<span>hello</span>
</NotesList> //返回兩個(gè)子節(jié)點(diǎn)
<NotesList></NotesList> //返回undefined
<NotesList>null</NotesList>//返回null
2、React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
? 類(lèi)似于 React.Children.map()，但是不返回對(duì)象。?
3、React.Children.count
number React.Children.count(object children)
返回 children 當(dāng)中的組件總數(shù)，和傳遞給 map 或者 forEach 的回調(diào)函數(shù)的調(diào)用次數(shù)一致。
render: function() {
? ? console.log(React.Children.count(this.props.children)); //2
? ? return (
? ? ? <ol>
? ? ? ? {
? ? ? ? ? this.props.children.forEach(function (child) {
? ? ? ? ? ? ? return <li>{child}</li>
? ? ? ? ? })
? ? ? ? }
? ? ? </ol>
? ? );
? }
不同的ReactElement，輸出count值:
<NotesList>
? ? <span>hello</span>
? ? <span>hello</span>
</NotesList>
console.log(React.Children.count(this.props.children)); //2
<NotesList></NotesList>
console.log(React.Children.count(this.props.children)); //0
<NotesList>null</NotesList>
console.log(React.Children.count(this.props.children)); //1
4、React.Children.only
object React.Children.only(object children)
返回children中僅有的子級(jí)。否則拋出異常。
這里僅有的子級(jí)，only方法接受的參數(shù)只能是一個(gè)對(duì)象，不能是多個(gè)對(duì)象（數(shù)組）。
console.log(React.Children.only(this.props.children[0]));
