react中Fragment的使用场景

在 React 中,Fragment 是一个非常有用的组件,允许你将多个子元素包裹在一起,而不会在 DOM 中产生额外的节点。它通常用于以下几个场景:

import React, {Fragment} from 'react';

  1. 返回多个子元素而不添加额外的 DOM 元素,避免 DOM 层级过深

function MyComponent() {

return (

<Fragment>

<h1>Title</h1>

<p>This is a paragraph.</p>

</Fragment>

);

}

可以简写为:

function MyComponent() {

return (

<>

<h1>Title</h1>

<p>This is a paragraph.</p>

</>

);

}

这个 Fragment 不会在实际的 DOM 中产生任何新的节点,只是将 <h1><p> 元素组合在一起。

2.需要键值时使用 Fragment

function List() {
const items = [{ id: 1, title: 'Item 1' }, { id: 2, title: 'Item 2' }];
return (
`

` ` {items.map((item) => (` ` <React.Fragment key={item.id}>` `

{item.title}

` `

{item.description}

` ` </React.Fragment>` ` ))}` `
` ` );` ` }`

使用 Fragment 可以直接给每个子元素分配一个 key,避免多余的包裹元素。

3.返回多个条件渲染的元素

当需要基于不同条件渲染多个元素时,Fragment 也非常有用。它可以避免不必要的 div 元素,保持渲染逻辑清晰。

function MyComponent({ isLoggedIn }) {

return (

<>

{isLoggedIn ? (

<>

<h1>Welcome back!</h1>

<button>Logout</button>

</>

) : (

<>

<h1>Please log in</h1>

<button>Login</button>

</>

)}

</>

);

}

  1. 组合多个 return 语句

在某些复杂组件中,你可能有多个 return 语句来处理不同的渲染条件,而 Fragment 可以帮助你避免为每个条件创建新的 DOM 层级

function MyComponent({ isLoading, hasError }) {

if (isLoading) {

return <p>Loading...</p>;

}

if (hasError) {

return (

<React.Fragment>

<h1>Error</h1>

<p>Something went wrong.</p>

</React.Fragment>

);

}

return <h1>Welcome to the app!</h1>;

}

总结

Fragment 是一个非常有用的工具,帮助开发者在不引入额外的 DOM 元素的情况下返回多个子元素。常见的使用场景包括:

  • 返回多个子元素而不增加额外的 DOM 节点。
  • 避免在列表或表格中增加不必要的嵌套。
  • 使用条件渲染时避免不必要的嵌套元素。
  • map() 渲染列表时提供 key

通过使用 Fragment,你可以更精简、更高效地组织和渲染组件内容,同时保持 DOM 的整洁和性能。有些类似于vue中的template模版标签

相关推荐
翻滚吧键盘9 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。28 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing2 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟2 小时前
用Sass循环实现炫彩文字跑马灯效果
前端