React淺析Fragments使用方法

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

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

概述

可以將子列表分組，而無需向DOM添加額外節(jié)點
簡單理解：空標(biāo)簽
<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>

短語法

可以使用一種新的，且更簡短的類似空標(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)文章

Remix中mdx?table不支持表格解決
這篇文章主要為大家介紹了Remix中mdx?table不支持表格問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
使用React制作一個貪吃蛇游戲的代碼詳解
Snake?Game?使用?ReactJS?項目實現(xiàn)功能組件并相應(yīng)地管理狀態(tài),開發(fā)的游戲允許用戶使用箭頭鍵控制蛇或觸摸屏幕上顯示的按鈕來收集食物并增長長度,本文給大家詳細(xì)講解了如何使用?React?制作一個貪吃蛇游戲,需要的朋友可以參考下
2023-11-11
React狀態(tài)管理Redux的使用介紹詳解
redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux的設(shè)置,需要的朋友可以參考下
2022-09-09
手挽手帶你學(xué)React之React-router4.x的使用
這篇文章主要介紹了手挽手帶你學(xué)React之React-router4.x的使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-02-02
react中的useContext具體實現(xiàn)
useContext是React提供的一個鉤子函數(shù),用于在函數(shù)組件中訪問和使用Context,useContext的實現(xiàn)原理涉及React內(nèi)部的機制,本文給大家介紹react中的useContext具體實現(xiàn),感興趣的朋友一起看看吧
2023-11-11
react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html
Grapes插件是一種用于Web開發(fā)的開源工具,可以幫助用戶快速創(chuàng)建動態(tài)和交互式的網(wǎng)頁元素,它還支持多語言和多瀏覽器,適合開發(fā)響應(yīng)式網(wǎng)頁和移動應(yīng)用程序,這篇文章主要介紹了react搭建在線編輯html的站點通過引入grapes實現(xiàn)在線拖拉拽編輯html,需要的朋友可以參考下
2023-08-08
react實現(xiàn)動態(tài)選擇框
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)動態(tài)選擇框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
react-router-dom?v6?使用詳細(xì)示例
這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助
2022-09-09
react電商商品列表的實現(xiàn)流程詳解
這篇文章主要介紹了react實現(xiàn)電商商品列表的流程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
React中的函數(shù)式插槽詳解
這篇文章主要為大家詳細(xì)介紹了React?開發(fā)中遇到的具名插槽的函數(shù)用法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,有興趣的小伙伴可以了解一下
2023-11-11