React 16.2 Fragments组件语法片段的使用
吴佳
2019-09-12 16:47:41
5935
7
0
什么是Fragments?
React中一个常见模式是为一个组件返回多个元素。Fragments可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。
当然,会Vue的朋友就会发现,它好像与Vue的template很像,都可以用来表示一个空的节点。但是它与Vue的temlate还是有点不同的,我们都知道Vue的组件template里面它的子级是只能存在一个节点的,而react的Fragments子级是可以存在多节点的,所以这也正式两者不同之处。
为什么使用Fragments?
首先,先来看一个示例
//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>
);
}
}
可以看到,在table组件tr中,渲染了Columns组件,而最终的输出是这样的
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
根据上方输出结构可以看到,tr下面多了一个div,造成了dom结构出现了非法嵌套,最终HTML将会是无效的。而这并不是为们想要的,所以Fragments的出现就是为了解决这样的问题。
如何使用Fragments?
我们就上方的示例进行更改
//Columns
class Columns extends React.Component {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
);
}
}
//Table
class Table extends React.Component {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
);
}
}
最终输出
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>
如果你觉得上方语法还是比较麻烦,不用着急,jsx提供了一个简写语法,示例如下
//Columns
class Columns extends React.Component {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
);
}
}
你可以像使用其他元素一样使用<></>,不过它不支持键值或属性。
请注意, 目前许多工具都不支持这个简写语法 , 所以你可能需要明确地使用 <React.Fragment> ,直到工具支持这个语法。
带key的Fragments
function Glossary (props) {
return (
<dl>
{props.items.map(item => (
// 没有`key`,将会触发一个key警告
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
key是唯一可以传递给Fragment的属性。未来,可能增加额外的属性支持,比如事件处理。
扫码关注后,回复“资源”免费领取全套视频教程
7
发表评论(共0条评论)