React 中一個常見模式是為一個組件返回多個元素蛮浑。 片段(fragments) 可以讓你將子元素列表添加到一個分組中达舒，并且不會在DOM中增加額外節(jié)點。
示例：
class Columns extends Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
class Table extends Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
如果 <Columns /> 的 render() 函數(shù)里面使用一個父級 div 腻贰，那么最終生成的 HTML 將是無效的吁恍。
輸出結(jié)果：
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
使用片段fragments
class Columns extends Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
class Table extends Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
輸出結(jié)果：
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
帶 key 的 片段(fragments)
如果你需要一個帶 key 的片段，你可以直接使用 <React.Fragment /> 播演。 一個使用場景是映射一個集合為一個片段數(shù)組 — 例如：創(chuàng)建一個描述列表：
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 沒有`key`冀瓦，將會觸發(fā)一個key警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
