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的屬性。在未來，我們可能會支持其他如事件處理器的屬性。
)
