React.Children 是頂層API之一，為處理 this.props.children 這個封閉的數據結構提供了有用的工具。
this.props 對象的屬性與組件的屬性一一對應，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節點。
1、React.Children.map
|
1
2
3
4
5
6
7
8
9
10
|
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>}) |
在每一個直接子級（包含在 children 參數中的）上調用 fn 函數，此函數中的 this 指向 上下文。如果 children 是一個內嵌的對象或者數組，它將被遍歷：不會傳入容器對象到 fn 中。如果 children 參數是 null 或者 undefined，那么返回 null 或者 undefined 而不是一個空對象。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<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 的值有三種可能：如果當前組件沒有子節點，它就是 undefined ;如果有一個子節點，數據類型是 object ；如果有多個子節點，數據類型就是 array 。所以，處理 this.props.children 的時候要小心。
React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點，而不用擔心 this.props.children 的數據類型是 undefined 還是 object。
傳入如下ReactElement：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<NotesList> <span>hello</span> <span>hello</span></NotesList>//返回兩個子節點 <NotesList></NotesList>//返回undefined <NotesList>null</NotesList>//返回null |
2、React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
類似于 React.Children.map()，但是不返回對象。
3、React.Children.count
number React.Children.count(object children)
返回 children 當中的組件總數，和傳遞給 map 或者 forEach 的回調函數的調用次數一致。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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值:
|
1
2
3
4
5
6
7
8
9
10
11
|
<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 中 僅有的子級。否則拋出異常。
這里僅有的子級，only方法接受的參數只能是一個對象，不能是多個對象（數組）。
|
1
2
|
console.log(React.Children.only(this.props.children[0])); //輸出對象this.props.children[0] |
以上就是React.Children的用法詳解的詳細內容，更多關于React.Children的用法的資料請關注服務器之家其它相關文章！
原文鏈接：https://blog.csdn.net/uuihoo/article/details/79710318
