『React』Fragment的用法及简写形式

在 React 渲染组件时,每个组件只能返回一个根节点(root element)。传统上,如果我们需要渲染多条并列的元素,通常会使用一个多余的 <div> 或者其他容器标签将它们包裹起来。但是,这样会在最终的 HTML 中多生成一个无意义的节点,可能会影响样式、布局,甚至带来不必要的性能开销。

为了消除这种"无意义的包裹元素",React 引入了 <Fragment> 组件。它 在渲染时不会生成额外的 DOM 节点,仅仅是一个"虚拟"容器,帮助我们在 JSX 中满足"只能返回一个根节点"的规则。它的本质只是 React 的一个内置组件,本身并不在 DOM 中出现。

Fragment 的用法

最直接的写法是直接从 React 库中导入 Fragment,然后在 JSX 中如下使用:

jsx 复制代码
import React, { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>标题</h1>
      <p>文字描述</p>
    </Fragment>
  );
}

上面代码,组件返回了一个 <Fragment>,内部包含多个并列元素;渲染到网页时并不会多出一个父级标签,而是直接渲染 <h1><p><ul> 三个元素。

如果你不想写 import { Fragment } from 'react',也可以直接使用全称:

jsx 复制代码
import React from 'react';

function MyComponent() {
  return (
    <React.Fragment>
      <h1>标题</h1>
      <p>这是一段描述文字。</p>
    </React.Fragment>
  );
}

export default MyComponent;

两者效果是完全一样的。

简写方式

从 React 16.2 开始,官方支持了 <Fragment> 的简写语法------空标签 <>...</>,使用起来更简洁:

jsx 复制代码
function MyComponent() {
  return (
    <>
      <h1>标题</h1>
      <p>这是一段描述文字。</p>
      <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
      </ul>
    </>
  );
}

两者(<Fragment>...</Fragment><>...</>)在渲染结果上没有区别。它们都不会在 DOM 中生成额外的节点。

注意: 空标签的简写语法 不能 使用 key 或其他属性,比如 <> 无法写成 < key="..." >。如果需要给 Fragment 本身指定 key,就必须使用完整写法 <Fragment key={...}>...</Fragment>

比如这种情况

jsx 复制代码
import React from 'react';

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map((todo) => (
        <Fragment key={todo.id}>
          <li>{todo.text}</li>
          <li>状态:{todo.completed ? '已完成' : '未完成'}</li>
        </Fragment>
      ))}
    </ul>
  );
}

如果使用简写空标签 <>...</> 则无法指定 key,会导致警告或无法正常做列表 Diff。因此在需要绑定 key 的场景下一定要使用 <Fragment key={...}>...</Fragment>

常见使用场景

组件返回多个并列节点

如果父级容器已足够,只想返回多条标签而不加冗余容器:

jsx 复制代码
function ArticleSummary({ title, excerpt }) {
  return (
    <>
      <h2>{title}</h2>
      <p>{excerpt}</p>
    </>
  );
}

表格中渲染多行

<table> 要求直接返回 <tr>,不能多包一层 <div><Fragment> 可把两行或多行当作一组处理:

jsx 复制代码
import React, { Fragment } from 'react';

function DataTable({ list }) {
  return (
    <table>
      <tbody>
        {list.map(item => (
          <Fragment key={item.id}>
            <tr>
              <td>{item.name}</td>
              <td>{item.value}</td>
            </tr>
            <tr>
              <td colSpan="2">详情:{item.detail}</td>
            </tr>
          </Fragment>
        ))}
      </tbody>
    </table>
  );
}

条件渲染多节点

当一个条件下需要返回多条并列节点,用 Fragment 代替冗余父元素,更清爽:

jsx 复制代码
function UserStatus({ user }) {
  return (
    <>
      <h3>{user.name}</h3>
      {user.online ? <p>在线</p> : <p>离线</p>}
    </>
  );
}

与其他方式对比

多包一个 <div>

虽然能满足语法,但会产生额外节点,可能破坏 CSS 布局(如 Flex、Grid)或增深 DOM 层级。

返回数组

可以直接写数组返回多个元素,但每个元素都要写 key,可读性差:

jsx 复制代码
function Example() {
  return [
    <h1 key="title">标题</h1>,
    <p key="content">内容</p>,
  ];
}

相比之下,Fragment 更简洁可读,且不用给内部每个元素都写 key(只需给 Fragment 本身写一次)。


以上就是本文的全部内容了,如果本文对你有帮助的话请转发给你的工友~

想了解 React 的更多玩法,欢迎关注《React 中文教程》

相关推荐
程序员爱钓鱼1 分钟前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路23 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
just小千25 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴31 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥34 分钟前
HTML之表单结构全解析
前端·html
qq_5895681043 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记1 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript