欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

React淺析Fragments使用方法

 更新時間：2022年12月03日 10:35:26   作者：碼農(nóng)小菲  
這篇文章主要介紹了React Fragments使用方法，關(guān)于react Fragments,React中一個常見模式是為一個組件返回多個元素。Fragments 可以讓你聚合一個子元素列表，并且不在DOM中增加額外節(jié)點

概述

  • 可以將子列表分組，而無需向DOM添加額外節(jié)點
  • 簡單理解：空標簽
  • <React.Fragment></React.Fragment> 或 <></>
render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

動機

  • 以下面的代碼為例，如果Columns組件返回多個td元素才能實現(xiàn)效果，但是如果我們在Columns組件中使用了div父元素，則會使td元素失效。Fragment則可以解決這個問題。
//table.js
const Table = () => {
  render() {
    return (
      <table>
        <tr>
          <Columns />
        </tr>
      </table>
    )
  }
}
//columns.js
const Columns = () => {
 render() {
    return (
      <div>
        <td>Hello</td>
        <td>World</td>
      </div>
    )
  }
}
//以上代碼輸出：
<table>
  <tr>
    <div>
      <td>Hello</td>
      <td>World</td>
    </div>
  </tr>
</table>
//此時 td 是失效的，可以使用Fragemengt解決這個問題
//用法：
//columns.js
const Columns = () => {
 render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    )
  }
}
//通過上面的方法我們就可以正確的輸出table啦：
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

短語法

  • 可以使用一種新的，且更簡短的類似空標簽的語法來聲明 Fragments
  • <> </>
  • 不支持 key 或?qū)傩?/li>
const Cloumns = () => {
render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    )
  }
}

帶key 的Fragments

  • 使用顯式 <React.Fragment> 語法聲明的片段可能具有 key
  • key 是唯一可以傳遞給 Fragment 的屬性
function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 沒有`key`，React 會發(fā)出一個關(guān)鍵警告
        <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </React.Fragment>
      ))}
    </dl>
  )
}

到此這篇關(guān)于React淺析Fragments使用方法的文章就介紹到這了,更多相關(guān)React Fragments內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情

    React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情

    這篇文章主要介紹了React函數(shù)組件hook原理及構(gòu)建hook鏈表算法詳情，每一個?hook?函數(shù)都有對應的?hook?對象保存狀態(tài)信息，更多詳細分析，需要的朋友可以參考一下
    2022-07-07
  • react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題

    react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題

    本文主要介紹了react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2024-01-01
  • React中使用ResizeObserver來觀察元素size變化的方法

    React中使用ResizeObserver來觀察元素size變化的方法

    在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個 Hook,以下是一個完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下
    2024-12-12
  • React Native 集成 ArcGIS 地圖的詳細過程

    React Native 集成 ArcGIS 地圖的詳細過程

    ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細過程,感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析

    Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析

    這篇文章主要為大家介紹了Redis數(shù)據(jù)結(jié)構(gòu)高頻面試問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-06-06
  • React hooks如何清除定時器并驗證效果

    React hooks如何清除定時器并驗證效果

    在React中,通過自定義Hook useTimeHook實現(xiàn)定時器的啟動與清除,在App組件中使用Clock組件展示當前時間,利用useEffect鉤子在組件掛載時啟動定時器,同時確保組件卸載時清除定時器,避免內(nèi)存泄露,這種方式簡化了狀態(tài)管理和副作用的處理
    2024-10-10
  • React實現(xiàn)反向代理和修改打包后的目錄

    React實現(xiàn)反向代理和修改打包后的目錄

    這篇文章主要介紹了React實現(xiàn)反向代理和修改打包后的目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • React路由組件傳參的三種方式(params、search、state)

    React路由組件傳參的三種方式(params、search、state)

    本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • React?Native集成支付寶支付的實現(xiàn)方法

    React?Native集成支付寶支付的實現(xiàn)方法

    這篇文章主要介紹了React?Native集成支付寶支付的實現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下
    2022-02-02
  • react-router-domV6版本改版踩坑記錄

    react-router-domV6版本改版踩坑記錄

    這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03

最新評論