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>
))热门推荐
10 新年门口花束祝福语简短
11 盘锦结婚祝福语大全简短
12 父母生日祝福语 简短独特
13 家庭恩爱祝福语简短英文
14 高考俄语祝福语大全简短
15 虎年祝福语 诗句唯美简短
16 生日婚礼祝福语简短精辟
17 虎年喝酒拜年祝福语简短
18 教师闺蜜祝福语简短