成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

#react# this.props.children的處理

yuanzhanghu / 3015人閱讀

摘要：是頂層之一，為處理這個(gè)封閉的數(shù)據(jù)結(jié)構(gòu)提供了有用的工具。對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是屬性。它表示組件的所有子節(jié)點(diǎn)。在每一個(gè)直接子級(jí)包含在參數(shù)中的上調(diào)用函數(shù)，此函數(shù)中的指向上下文。返回中僅有的子級(jí)。

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)。
this.props.children 的值有三種可能：如果當(dāng)前組件沒有子節(jié)點(diǎn)，它就是 undefined ;如果有一個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型是 object ；如果有多個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型就是 array 。所以，處理 this.props.children 的時(shí)候要小心。
this.props.children的返回值情況如下：


   hello
   hello

//返回兩個(gè)子節(jié)點(diǎn)



//返回undefined


null
//返回null

React 提供一個(gè)工具方法 React.Children 來處理 this.props.children 。我們可以用 React.Children.map 來遍歷子節(jié)點(diǎn)，而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined 還是 object。

React.Children.map

object React.Children.map(object children, function fn [object context])

在每一個(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ì)象。

使用方法：
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()，但是不返回對(duì)象。

    使用方法
this.props.children.forEach(function (child) {
    return 
  • {child}
    • 
})

    類似于 React.Children.map()，但是不返回對(duì)象

    React.Children.count

    number React.Children.count(object children)

    返回 children 當(dāng)中的組件總數(shù)，和傳遞給 map 或者 forEach 的回調(diào)函數(shù)的調(diào)用次數(shù)一致。

    
    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 中 僅有的子級(jí)。否則拋出異常。
    這里僅有的子級(jí)，only方法接受的參數(shù)只能是一個(gè)對(duì)象，不能是多個(gè)對(duì)象（數(shù)組）

    console.log(React.Children.only(this.props.children[0])); 
//輸出對(duì)象this.props.children[0]

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/110201.html

    相關(guān)文章

    • 用React實(shí)現(xiàn)點(diǎn)擊切換的標(biāo)簽頁

      摘要：四總結(jié)上面一系列的操作最終的結(jié)果都需要用來反應(yīng)出來，所以關(guān)鍵點(diǎn)是如何在中使用來動(dòng)態(tài)生成接下來的改進(jìn)實(shí)現(xiàn)可以滑動(dòng)的標(biāo)簽頁 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實(shí)現(xiàn) 既然用React寫，那么它就必然是一個(gè)組件，首先考慮你怎么使用這個(gè)組件，也就是這個(gè)組件的接口是怎么樣的。 ...

      xushaojieaaa 評(píng)論0 收藏0

    • 用React實(shí)現(xiàn)點(diǎn)擊切換的標(biāo)簽頁

      摘要：四總結(jié)上面一系列的操作最終的結(jié)果都需要用來反應(yīng)出來，所以關(guān)鍵點(diǎn)是如何在中使用來動(dòng)態(tài)生成接下來的改進(jìn)實(shí)現(xiàn)可以滑動(dòng)的標(biāo)簽頁 一、首先是Showcase See the Pen react-tabs by Wang Chao (@charleyw) on CodePen. 二、如何實(shí)現(xiàn) 既然用React寫，那么它就必然是一個(gè)組件，首先考慮你怎么使用這個(gè)組件，也就是這個(gè)組件的接口是怎么樣的。 ...

      codeKK 評(píng)論0 收藏0

    • React 模式（中文版）

      摘要：渲染屬性這里有個(gè)組件，使用了一個(gè)渲染回調(diào)函數(shù)。這個(gè)狀態(tài)被提升到了容器中，通過添加回調(diào)函數(shù)，回調(diào)中可以更新本地狀態(tài)。這個(gè)是正常的受控的輸入不允許變更，這使得這個(gè)模式成為可能。 中文版：https://reactpatterns.cn/原版：https://reactpatterns.com 函數(shù)組件 (Function component) 函數(shù)組件 是最簡(jiǎn)單的一種聲明可復(fù)用組件的方法 ...

      hzx 評(píng)論0 收藏0

    • react源碼淺析(三)：ReactElement

      摘要：開發(fā)環(huán)境比生產(chǎn)環(huán)境多了，，屬性，并且以及被凍結(jié)，無法修改配置。當(dāng)這個(gè)是元素的，那么其與是無法傳入新元素上的與。返回的元素相當(dāng)于其源碼與類似，不同的地方是在開發(fā)環(huán)境下不會(huì)對(duì)調(diào)用與對(duì)與進(jìn)行獲取攔截。 showImg(https://segmentfault.com/img/remote/1460000018335788?w=600&h=300); react相關(guān)庫源碼淺析 react ts...

      Hujiawei 評(píng)論0 收藏0

    • React入門學(xué)習(xí)

      摘要：對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是屬性，它表示組件的所有子節(jié)點(diǎn)。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。組件中樣式的寫法這種方式錯(cuò)誤使用這種方式，第一重大括號(hào)表示這是語法，第二重大括號(hào)表示樣式對(duì)象。 如何渲染到容器 直接上代碼： //第一個(gè)參數(shù)是構(gòu)造的組件，第二個(gè)參數(shù)是使用組件的容器 ReactDom.render( , document.getEleme...

      laznrbfe 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    閱讀需要支付1元查看
    <