React一个常用的模式是组件返回多个元素。Fragment可以为你的子元素分组而不需要在DOM上为它们添加额外的节点。
Fragment 使用
render() {return (<React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> );}
短语法使用
这里有一种短语法可以用来声明Fragment，它看起来就像是空标签：
class Columns extends React.Component {render() {return (<> <td>Hello</td> <td>World</td> </> ); }
}
两者区别
使用<React.Fragment>语法声明的Fragment是可以有key的。一个使用场景是将集合映射到一组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的属性。在未来，我们可能会支持其他如事件处理器的属性。
)
