快捷導(dǎo)航

React淺析Fragments使用方法

更新時(shí)間：2022年12月03日 10:35:26 作者：碼農(nóng)小菲

這篇文章主要介紹了React Fragments使用方法，關(guān)于react Fragments,React中一個常見模式是為一個組件返回多個元素。Fragments 可以讓你聚合一個子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)

概述

可以將子列表分組，而無需向DOM添加額外節(jié)點(diǎn)
簡單理解：空標(biāo)簽
<React.Fragment></React.Fragment> 或 <></>

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

動機(jī)

以下面的代碼為例，如果Columns組件返回多個td元素才能實(shí)現(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>
//此時(shí) 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>

短語法

可以使用一種新的，且更簡短的類似空標(biāo)簽的語法來聲明 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鏈表算法詳情，每一個?hook?函數(shù)都有對應(yīng)的?hook?對象保存狀態(tài)信息，更多詳細(xì)分析，需要的朋友可以參考一下
2022-07-07
react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題
本文主要介紹了react-native 配置@符號絕對路徑配置和絕對路徑?jīng)]有提示的問題,文中通過圖文示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-01-01
React中使用ResizeObserver來觀察元素size變化的方法
在 React 中使用 ResizeObserver 來觀察元素的大小變化,可以通過創(chuàng)建一個自定義 Hook 來封裝 ResizeObserver 的邏輯,并在組件中使用這個 Hook,以下是一個完整的示例,展示了如何在 React 中使用 ResizeObserver 來觀察元素的大小變化,需要的朋友可以參考下
2024-12-12
React Native 集成 ArcGIS 地圖的詳細(xì)過程
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并沒有提供 React Native的版本,所以這里使用了 react-native-arcgis-mapview 庫,本文給大家介紹React Native 集成 ArcGIS 地圖的詳細(xì)過程,感興趣的朋友跟隨小編一起看看吧
2024-06-06
Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析
這篇文章主要為大家介紹了Redis數(shù)據(jù)結(jié)構(gòu)高頻面試問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
React hooks如何清除定時(shí)器并驗(yàn)證效果
在React中,通過自定義Hook useTimeHook實(shí)現(xiàn)定時(shí)器的啟動與清除,在App組件中使用Clock組件展示當(dāng)前時(shí)間,利用useEffect鉤子在組件掛載時(shí)啟動定時(shí)器,同時(shí)確保組件卸載時(shí)清除定時(shí)器,避免內(nèi)存泄露,這種方式簡化了狀態(tài)管理和副作用的處理
2024-10-10
React實(shí)現(xiàn)反向代理和修改打包后的目錄
這篇文章主要介紹了React實(shí)現(xiàn)反向代理和修改打包后的目錄方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
React路由組件傳參的三種方式(params、search、state)
本文主要介紹了React路由組件傳參的三種方式，主要包括了params、search、state，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
React?Native集成支付寶支付的實(shí)現(xiàn)方法
這篇文章主要介紹了React?Native集成支付寶支付的實(shí)現(xiàn)現(xiàn),ativeModules是JS代碼調(diào)用原生模塊的橋梁。所以，我們只需要在原生工程中集成支付寶和微信支付的sdk，然后使用NativeModules調(diào)用即可，需要的朋友可以參考下
2022-02-02
react-router-domV6版本改版踩坑記錄
這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03