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

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

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

Fragment 的用法

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

import React, { Fragment } from 'react';function MyComponent() {return (<Fragment><h1>标题</h1><p>文字描述</p></Fragment>);
}

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

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

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

两者效果是完全一样的。

简写方式

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

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>。

比如这种情况

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>。

常见使用场景

组件返回多个并列节点

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

function ArticleSummary({ title, excerpt }) {return (<><h2>{title}</h2><p>{excerpt}</p></>);
}

表格中渲染多行

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

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 代替冗余父元素，更清爽：

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

与其他方式对比

多包一个 <div>

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

返回数组

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

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

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

---

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

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