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

相关推荐
excel17 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel19 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼20 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping20 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙21 小时前
[译] Composition in CSS
前端·css
白水清风21 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix21 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780021 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端21 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧21 小时前
Promise 的使用
前端·javascript