基本介绍
- React 中的一个常见模式是一个组件返回多个元素。
Fragments
允许你将子列表分组,而无需向DOM
添加额外节点。- 也可以使用
<></>
的语法来声明 Fragments,它看起来像空标签。- 但是
Fragments
支持key
属性,而<></>
不支持任何属性
使用显式 <React.Fragment>
语法声明的片段可能具有 key
。一个使用场景是将一个集合映射到一个 Fragments
数组 - 举个例子,创建一个描述列表:
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`,React 会发出一个关键警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
案例分析
- 一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例:
// Columns 子组件
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
// Table 父组件
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
<Columns />
需要返回多个 <td>
元素以使渲染的 HTML
有效。如果在 <Columns />
的 render()
中使用了父 div
,则生成的 HTML
将无效。
<!-- 得到一个错误的 <Table /> 输出: -->
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
- 而
Fragments
解决了这个问题。
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
<!-- 得到一个正确 <Table /> 输出: -->
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>