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

相关推荐
艾小逗41 分钟前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇3 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk5 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务