React 中经常会遇到一个组件中 return 多个子组件的情况，举个简单的例子：
代码语言：javascript复制class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}该情况下子组件 <Columns /> 需要返回 <td> 元素，父组件的表格才能正常显示。
如果在 <Columns /> 的 render() 中的最外层使用了 div ，就会出问题。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}最终得到的 <Table /> 输出为：
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>这时候 <Fragment /> 标签就派上用场了。
Fragments 的作用
Fragments 可以作为一个标签使用，但不会向 DOM 添加额外节点。
用法：
代码语言：javascript复制class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}这样可以正确的输出 <Table />：
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>带 key 的 Fragments：
使用显式 <React.Fragment> 语法声明的片段支持使用 key 值。
一个使用场景是将一个集合映射到一个 Fragments 数组：
代码语言：javascript复制function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`，React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}目前 key 是唯一可以传递给 Fragment 的属性。未来 React 可能会添加对其他属性的支持，例如事件。
简单(新)语法：
也可以用空标签来代替，这是一种新的，且更简短的语法来声明 Fragments：
代码语言：javascript复制class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}注意：空标签 <> </>，不支持 key 或属性。
未经允许不得转载：w3h5-Web前端开发资源网 » React的Fragment标签有什么作用
