Fragments
React中一个常见的模式就是为一个组件返回多个元素，Fragment可以聚合一些子元素的列表。并且不是在DOM中额外的增加节点。
Fragment看起来像空的jsx标签。
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
动机
一个常见的模式是为了组件返回一些子元素列表，以这个实例的React片段为例。
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
为了最终渲染有效的HTML，需要在 <Columns />中渲染<td>，然而不能再父级的<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>
此时中间就会有一个<div>，这不是我们想看到的。
因此我们引入了Fragment
使用
class Columns extends React.Component{
render(){
return(
<>
<td>hello</td>
<td>world</td>
</>
)
}
}
这等于在<td>外围添加一个空的标签，这样就不会有编译问题，提示你没有根元素了。
然后在正确的<table/>组件中，渲染的结果也是正确的。
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
可以像使用其它元素那样使用 <></>。
清晰的形式
另一种使用的方式是使用React.Fragment组件，React.Fragment组件可以在React对象上使用。这可能是必要的，如果你的工具还不支持jsx片段的话， 注意在 React 中，<></> 是 <React.Fragment/> 的语法糖。
带key的Fragments
<></>类型的写法不能接受 键值和属性。这也是他的缺陷。
此时，如果你需要一个带key的片段，你可以直接使用<React.Fragment />，一个使用场景是映射一个集合为一个片段数组。例如创建一个描述列表。
function Glossary(props){
return(
<dl>
{props.items.map(item => (
// 没有`key`，将会触发一个key警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
)
}
key是唯一可以在Fragment中传递属性的，在以后可能会增加额外的属性支持或者事件处理。
在线 Demo
你可以使用 CodePen 试试 JSX 片段语法。
