React.Fragment
官方文檔：
React 中一個(gè)常見(jiàn)模式是為一個(gè)組件返回多個(gè)元素恭垦。Fragments 可以讓你聚合一個(gè)子元素列表，并且不在DOM中增加額外節(jié)點(diǎn)士败。
Fragments 看起來(lái)像空的 JSX 標(biāo)簽：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
一個(gè)常見(jiàn)模式是為一個(gè)組件返回一個(gè)子元素列表控汉。以這個(gè)示例的 React 片段為例：
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
為了渲染有效的 HTML ， <Columns /> 需要返回多個(gè) <td> 元素钟病。如果一個(gè)父 div 在 <Columns /> 的 render()**** 函數(shù)里面使用萧恕，那么最終的 HTML 將是無(wú)效的。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
在 <Table /> 組件中的輸出結(jié)果如下：
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
所以肠阱，我們介紹 Fragments票唆。
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
在正確的 <Table /> 組件中，這個(gè)結(jié)果輸出如下：
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
你可以像使用其它元素那樣使用 <></>屹徘。
另一種使用片段的方式是使用 React.Fragment 組件走趋，React.Fragment 組件可以在 React 對(duì)象上使用。 這可能是必要的缘回，如果你的工具還不支持 JSX 片段吆视。 注意在 React 中， <></> 是 <React.Fragment/> 的語(yǔ)法糖酥宴。
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
帶 key 的 Fragments
<></> 語(yǔ)法不能接受鍵值或?qū)傩浴?/p>
如果你需要一個(gè)帶 key 的片段啦吧，你可以直接使用 <React.Fragment /> 。
一個(gè)使用場(chǎng)景是映射一個(gè)集合為一個(gè)片段數(shù)組 — 例如：創(chuàng)建一個(gè)描述列表：
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 沒(méi)有`key`拙寡，將會(huì)觸發(fā)一個(gè)key警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
key 是唯一可以傳遞給 Fragment 的屬性授滓。在將來(lái)，我們可能增加額外的屬性支持肆糕，比如事件處理般堆。
