react之Fragments使用方法及使用场景
react 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。
render() {
return (
<react.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
还有一种新的短语法可用于声明它们。
动机
一种常见模式是组件返回一个子元素列表。以此 React 代码片段为例:
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
<Columns /> 需要返回多个 <td> 元素以使渲染的 html 有效。如果在 <Columns /> 的 render() 中使用了父 div,则生成的 html 将无效。
class Columns extends React.Component {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
);
}
}
得到一个 <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>
<td>Hello</td>
<td>World</td>
</tr>
</table>
短语法
你可以使用一种新的,且更简短的语法来声明 Fragments。它看起来像空标签:
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
你可以像使用任何其他元素一样使用 <> </>,除了它不支持 key 或属性。
资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com
带 key 的 Fragments
使用显式 <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>
);
}
key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持,例如事件。