React Fragments 是什么？为什么要使用它们？

Question

Accepted Answer

组件必须返回**单个根元素**，但您通常不想仅为了满足这个规则而添加额外的 `

` 包装器（它可能会破坏 CSS 布局如 flexbox/grid 或 HTML 结构如 tables）。**Fragment** 在**不**添加任何 DOM 节点的情况下对子元素进行分组。 ```jsx function TableRow() { return ( <> {/* Fragment — produces NO extra element in the DOM */} Name Email ); } ``` 如果您在此处使用 `

` 代替，您会得到无效的 HTML（`

…`），表格将被破坏。Fragment 仅渲染这两个 ``。 ## 短语法 vs 完整语法 ```jsx <>... // short syntax (most common) // full syntax — needed when you must pass a key ... ``` 当渲染**fragment 列表**时使用完整形式，因为短形式 `<>` 不能接受 `key`： ```jsx {items.map(item => (

{item.term}

{item.def}

))} ``` ## 为什么这很重要 Fragment 保持 DOM 清洁（没有