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模版标签

相关推荐
一张假钞1 分钟前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 分钟前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758102 分钟前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周6 分钟前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队24 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei1 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js