React浅析Fragments使用方法
作者：码农小菲
这篇文章主要介绍了React Fragments使用方法，关于react Fragments,React中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表，并且不在DOM中增加额外节点
概述
- 可以将子列表分组，而无需向DOM添加额外节点
- 简单理解：空标签
- <React.Fragment></React.Fragment> 或 <></>
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
)
}
动机
- 以下面的代码为例，如果Columns组件返回多个td元素才能实现效果，但是如果我们在Columns组件中使用了div父元素，则会使td元素失效。Fragment则可以解决这个问题。
//table.js
const Table = () => {
render() {
return (
<table>
<tr>
<Columns />
</tr>
</table>
)
}
}
//columns.js
const Columns = () => {
render() {
return (
<div>
<td>Hello</td>
<td>World</td>
</div>
)
}
}
//以上代码输出：
<table>
<tr>
<div>
<td>Hello</td>
<td>World</td>
</div>
</tr>
</table>
//此时 td 是失效的，可以使用Fragemengt解决这个问题
//用法：
//columns.js
const Columns = () => {
render() {
return (
<React.Fragment>
<td>Hello</td>
<td>World</td>
</React.Fragment>
)
}
}
//通过上面的方法我们就可以正确的输出table啦：
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>短语法
- 可以使用一种新的，且更简短的类似空标签的语法来声明 Fragments
- <> </>
- 不支持 key 或属性
const Cloumns = () => {
render() {
return (
<>
<td>Hello</td>
<td>World</td>
</>
)
}
}
带key 的Fragments
- 使用显式 <React.Fragment> 语法声明的片段可能具有 key
- key 是唯一可以传递给 Fragment 的属性
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浅析Fragments使用方法的文章就介绍到这了,更多相关React Fragments内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！