React.js 中的 Fragment
react jsjavascript libraryfront end technology更新于 2025/11/7 2:20:17
大多数情况下，我们需要从一个组件返回多个元素。React Fragment 可以帮助我们返回多个元素。另一种方法是使用 div 等 HTML 元素来包裹它们。但是使用额外的 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>
);
}
}
实际语法将包含我们在列的返回语句中添加的 div 。
<table> <tr> <div> <td>col 1 </td> <td>col 2</td> </div> </tr> </table>
现在，table 标签包含一个 div 标签，这破坏了 html 的语义。为了避免这种情况，我们可以简单地用 React.Fragment 替换 div，或者简称为 <>
class ExampleColumns extends React.Component {
render() {
return (
<>
<td>col 1</td>
<td>col 2</td>
</>
);
}
}
我们也可以在列表迭代中使用 fragment。
props.myMessages.map(message => (
// 如果没有 `key`，React 会触发 key 警告
<React.Fragment key={message.id}>
<dt>{message.title}</dt>
<dd>{message.text}</dd>
</React.Fragment>
))
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
