摘要:是頂層之一,為處理這個封閉的數據結構提供了有用的工具。對象的屬性與組件的屬性一一對應,但是有一個例外,就是屬性。它表示組件的所有子節點。在每一個直接子級包含在參數中的上調用函數,此函數中的指向上下文。返回中僅有的子級。
React.Children 是頂層API之一,為處理 this.props.children 這個封閉的數據結構提供了有用的工具。
this.props 對象的屬性與組件的屬性一一對應,但是有一個例外,就是 this.props.children 屬性。它表示組件的所有子節點。
this.props.children 的值有三種可能:如果當前組件沒有子節點,它就是 undefined ;如果有一個子節點,數據類型是 object ;如果有多個子節點,數據類型就是 array 。所以,處理 this.props.children 的時候要小心。
this.props.children的返回值情況如下:
</>復制代碼
hello
hello
//返回兩個子節點
//返回undefined
null
//返回null
React 提供一個工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節點,而不用擔心 this.props.children 的數據類型是 undefined 還是 object。
React.Children.map
</>復制代碼
object React.Children.map(object children, function fn [object context])
在每一個直接子級(包含在 children 參數中的)上調用 fn 函數,此函數中的 this 指向 上下文。如果 children 是一個內嵌的對象或者數組,它將被遍歷:不會傳入容器對象到 fn 中。如果 children 參數是 null 或者 undefined,那么返回 null 或者 undefined 而不是一個空對象。
</>復制代碼
使用方法:
React.Children.map(this.props.children, function (child) {
return
{child}
;
})
React.Children.forEach
</>復制代碼
React.Children.forEach(object children, function fn [object context])
類似于 React.Children.map(),但是不返回對象。
</>復制代碼
使用方法
this.props.children.forEach(function (child) {
return
{child}
})
類似于 React.Children.map(),但是不返回對象
React.Children.count
</>復制代碼
number React.Children.count(object children)
返回 children 當中的組件總數,和傳遞給 map 或者 forEach 的回調函數的調用次數一致。
</>復制代碼
hello
hello
console.log(React.Children.count(this.props.children)); //2
console.log(React.Children.count(this.props.children)); //0
null
console.log(React.Children.count(this.props.children)); //1
React.Children.only
</>復制代碼
object React.Children.only(object children)
返回 children 中 僅有的子級。否則拋出異常。
這里僅有的子級,only方法接受的參數只能是一個對象,不能是多個對象(數組)
</>復制代碼
console.log(React.Children.only(this.props.children[0]));
//輸出對象this.props.children[0]
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110201.html
摘要:四總結上面一系列的操作最終的結果都需要用來反應出來,所以關鍵點是如何在中使用來動態生成接下來的改進實現可以滑動的標簽頁 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實現 既然用React寫,那么它就必然是一個組件,首先考慮你怎么使用這個組件,也就是這個組件的接口是怎么樣的。 ...
摘要:四總結上面一系列的操作最終的結果都需要用來反應出來,所以關鍵點是如何在中使用來動態生成接下來的改進實現可以滑動的標簽頁 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實現 既然用React寫,那么它就必然是一個組件,首先考慮你怎么使用這個組件,也就是這個組件的接口是怎么樣的。 ...
摘要:渲染屬性這里有個組件,使用了一個渲染回調函數。這個狀態被提升到了容器中,通過添加回調函數,回調中可以更新本地狀態。這個是正常的受控的輸入不允許變更,這使得這個模式成為可能。 中文版:https://reactpatterns.cn/原版:https://reactpatterns.com 函數組件 (Function component) 函數組件 是最簡單的一種聲明可復用組件的方法 ...
摘要:開發環境比生產環境多了,,屬性,并且以及被凍結,無法修改配置。當這個是元素的,那么其與是無法傳入新元素上的與。返回的元素相當于其源碼與類似,不同的地方是在開發環境下不會對調用與對與進行獲取攔截。 showImg(https://segmentfault.com/img/remote/1460000018335788?w=600&h=300); react相關庫源碼淺析 react ts...
閱讀 781·2023-04-25 16:55
閱讀 2816·2021-10-11 10:59
閱讀 2080·2021-09-09 11:38
閱讀 1794·2021-09-03 10:40
閱讀 1492·2019-08-30 15:52
閱讀 1132·2019-08-30 15:52
閱讀 962·2019-08-29 15:33
閱讀 3504·2019-08-29 11:26