一、解决了什么问题？
在不额外创建 DOM 元素的情况下，让 render() 方法中返回多个元素，减少不必要的元素嵌套。
二、用法说明
1、问题
下面的 Table 不能正常渲染，原因是 Colums 中夹杂了 <div> 元素。
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
2、fragment解决方案
用 React.Fragment 修改上面的 Columns 组件，即可正确渲染 table 。
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
3、短语法
React.Fragment 还有另外一种写法 <></> 。
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
4、key属性
目前 key 是唯一能传递给 React.Fragment 的属性。
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>
);
}
