React 中有一个Fragment,可以通过它无需向DOM添加额外包含节点。
render() {
return (
<React.Fragment>
<A />
<B />
<C />
</React.Fragment>
);
}
有时候可能会需要用到键值key 就比如要创建一个列表:
function List(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.title}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
key是可以传递给Fragment的属性,此外,还可以使用一种新的,更短的语法来声明片段。它看起来像空标签:
class Paragraph extends React.Component {
render() {
return (
<>
<h1>Hello</h1>
<h2>World</h2>
</>
);
}
}
使用<> </>,就像使用任何其他元素一样,但是不支持键或属性
注意,许多工具尚不支持它,因此最好还是使用<React.Fragment>,直到工具支持。