React.Children的用法詳解
React.Children 是頂層API之一，為處理 this.props.children 這個封閉的數(shù)據(jù)結(jié)構(gòu)提供了有用的工具。
this.props 對象的屬性與組件的屬性一一對應(yīng)，但是有一個例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點。
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>
})
在每一個直接子級（包含在 children 參數(shù)中的）上調(diào)用 fn 函數(shù)，此函數(shù)中的 this 指向 上下文。如果 children 是一個內(nèi)嵌的對象或者數(shù)組，它將被遍歷：不會傳入容器對象到 fn 中。如果 children 參數(shù)是 null 或者 undefined，那么返回 null 或者 undefined 而不是一個空對象。
<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)前組件沒有子節(jié)點，它就是 undefined ;如果有一個子節(jié)點，數(shù)據(jù)類型是 object ；如果有多個子節(jié)點，數(shù)據(jù)類型就是 array 。所以，處理 this.props.children 的時候要小心。
React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節(jié)點，而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined 還是 object。
傳入如下ReactElement：
<NotesList> <span>hello</span> <span>hello</span> </NotesList> //返回兩個子節(jié)點 <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 當(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 中 僅有的子級。否則拋出異常。
這里僅有的子級，only方法接受的參數(shù)只能是一個對象，不能是多個對象（數(shù)組）。
console.log(React.Children.only(this.props.children[0])); //輸出對象this.props.children[0]
以上就是React.Children的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于React.Children的用法的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Hook?是?React?16.8?的新增特性，它可以讓我們在不編寫class的情況下,?使用state以及其他的React特性(比如生命周期，這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下2022-11-11
使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進度條效果
這篇文章主要介紹了使用ReactJS實現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進度條效果的相關(guān)資料,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了React事件處理和表單的綁定，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了react+antd 遞歸實現(xiàn)樹狀目錄操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
采用React編寫小程序的Remax框架的編譯流程解析(推薦)
這篇文章主要介紹了采用React編寫小程序的Remax框架的編譯流程解析(推薦),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
React中使用react-player 播放視頻或直播的方法
這篇文章主要介紹了React中使用react-player 播放視頻或直播，本文教大家如何使用react框架及創(chuàng)建實例的代碼,本文內(nèi)容簡短給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-01-01
下面小編就為大家?guī)硪黄唵握務(wù)凴eact中的路由系統(tǒng)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了React路由跳轉(zhuǎn)的幾種方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了React 組件生命周期的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了react中的ajax封裝實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10