快捷導(dǎo)航

React淺析Fragments使用方法

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

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

概述

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

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

動(dòng)機(jī)

以下面的代碼為例，如果Columns組件返回多個(gè)td元素才能實(shí)現(xiàn)效果，但是如果我們?cè)贑olumns組件中使用了div父元素，則會(huì)使td元素失效。Fragment則可以解決這個(gè)問(wèn)題。

//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解決這個(gè)問(wèn)題
//用法：
//columns.js
const Columns = () => {
 render() {
    return (
      <React.Fragment>
        <td>Hello</td>
        <td>World</td>
      </React.Fragment>
    )
  }
}
//通過(guò)上面的方法我們就可以正確的輸出table啦：
<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

短語(yǔ)法

可以使用一種新的，且更簡(jiǎn)短的類(lèi)似空標(biāo)簽的語(yǔ)法來(lái)聲明 Fragments
<> </>
不支持 key 或?qū)傩?/li>

const Cloumns = () => {
render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    )
  }
}

帶key 的Fragments

使用顯式 <React.Fragment> 語(yǔ)法聲明的片段可能具有 key
key 是唯一可以傳遞給 Fragment 的屬性

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        // 沒(méi)有`key`，React 會(huì)發(fā)出一個(gè)關(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

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