数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究React.js 中的片段
大多数情况下，我们需要从一个组件返回多个元素。React Fragment 有助于返回多个元素。另一种方法是用一个 html 元素（如 div）将它们包装起来。但使用额外的 html 节点会导致一些语义问题。
React.Fragment 示例
render() {
return (
<React.Fragment>
<ElementA />
<ElementB />
<ElementC />
</React.Fragment>
);
}
The short syntax is <>:
render() {
return (
<>
<ElementA />
<ElementB />
<ElementC />
</>
);
}假如不使用 React Fragment，会产生什么问题——
假设我们创建一个表格——
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>
);
}
}实际语法将包含我们添加到 columns 的 return 语句中的 div 。
<table> <tr> <div> <td>col 1 </td> <td>col 2</td> </div> </tr> </table>
现在，table 标签包含一个正在破坏 html 语义的 div 标签。因此，为了避免这种情况，我们可以简单地用 React.Fragment 或简写 <> 替换 div。
class ExampleColumns extends React.Component {
render() {
return (
<>
<td>col 1</td>
<td>col 2</td>
</>
);
}
}我们还可以在迭代列表时使用片段。
props.myMessages.map(message => (
// Without the `key`, React will fire a key warning
<React.Fragment key={message.id}>
<dt>{message.title}</dt>
<dd>{message.text}</dd>
</React.Fragment>
))
更新于： 05-Sep-2019
411 次浏览
广告