前端Wiki/词条/Fragment 片段

Fragment 片段

定义无需额外 DOM 节点即可给一组元素分组，保持渲染结果干净无包裹

React 组件的 return 只能有一个根元素，导致大家无奈包一层 div。这种无意义包裹会让 DOM 层级越来越深：列表里多套一层 div 破坏 grid/flex 结构，table 里包 div 甚至直接报错。Fragment 让组件返回元素组却不产生真实节点，结构完全透明。

两种写法：显式写法支持 key 属性，用于列表渲染；<> 简写最日常但不能带任何属性。除了消除多余节点，它也避免了包裹 div 上奇怪的样式继承问题，是写表格、列表、定义列表等结构敏感场景的必备工具。

一个组件返回多个并列元素又不想要多余包裹节点时使用
列表场景必须用带 key 的显式 Fragment，简写语法不支持 key
table/ul 的直接子元素只能是合法标签，Fragment 是唯一合法容器

JavaScript

import { Fragment } from 'react';

function Columns({ items }) {
  return (
    <>
      <td>姓名</td>
      <td>操作</td>
      {items.map((item) => (
        <Fragment key={item.id}>
          <td>{item.name}</td>
          <td><button>删除</button></td>
        </Fragment>
      ))}
    </>
  );
}

function TableRow() {
  return (
    <table><tbody><tr><Columns items={[{ id: 1, name: '张三' }]} /></tr></tbody></table>
  );
}

⚠ 常见误区

在简写 <> 上写 key，语法直接报错——列表要用显式 Fragment
组件返回数组替代 Fragment，少了 key 警告满天飞
用 div 包裹 td 再塞进 tr，浏览器解析时结构性报错

🔗 相关词条JSX 基础写法列表渲染与 key