React.js中的片段
大多数时候，我们需要从一个组件返回多个元素。ReactFragment帮助返回多个元素。另一种选择是使用div之类的html元素包装它们。但是使用额外的html节点可能会导致一些语义问题。
React.Fragment的示例
render() {
return (
<React.Fragment>
<ElementA />
<ElementB />
<ElementC />
</React.Fragment>
);
}
The short syntax is <>:
render() {
return (
<>
<ElementA />
<ElementB />
<ElementC />
</>
);
}如果不使用ReactFragment，则了解问题-
假设我们创建一个表-
class ExampleTable extends React.Component {
render() {
return (
<table>
<tr>
<ExampleColumns />
<tr>
</table>
);
}
}
class ExampleColumns extends React.Component {
render() {
return (
<div>
<td>col 1</td>
<td>col 2</td>
</div>
);
}
}实际的语法将包括我们在各列的return语句中添加的div 。
<table>
<tr>
<div>
<td>col 1 </td>
<td>col 2</td>
</div>
</tr>
</table>现在，表标记包含一个div标记，这破坏了html的语义。因此，为避免这种情况，我们可以简单地将div替换为React.Fragment或简称<>
class ExampleColumns extends React.Component {
render() {
return (
<>
<td>col 1</td>
<td>col 2</td>
</>
);
}
}我们也可以在列表的迭代中使用该片段。
props.myMessages.map(message => (
//如果没有`key`，React会发出按键警告
<React.Fragment key={message.id}>
<dt>{message.title}</dt>
<dd>{message.text}</dd>
</React.Fragment>
))