Fragments
React中的一个常见模式是一个组件返回多个元素。Fragments允许你将字列表分组,而无需向DOM添加额外的子节点。
class App extends React.Component{
render(){
return <React.Fragment>
<div></div>
<div></div>
<div></div>
</React.Fragment>
}
}
动机
一种常见模式是组件返回一个子元素列表,例如在表格中:
class App extends React.Component {
render () {
let tableData = [1, 2, 3, 4,];
return <table>
<tr>
<Columns></Columns>
</tr>
</table>
}
}
class Columns extends React.Component {
render (){
return <React.Fragment>
{tableData.map(value => <td>{value}</td>)}
</React.Fragment>
}
}
带key的Fragments
使用显示<React.Fragment>
语法声明的片段可能具有key。一个使用场景是将一个集合映射到一个Fragments数据。
function Glossary (props) {
return (
<dl>
{
props.items.map(item => {
<React.Fragment key={item.id}>
<dt>{item.name}</dt>
<dd>{item.des}</dd>
</React.Fragment>
})
}
</dl>
)
}
key
是唯一可以传递给Fragment的属性。