React浅析Fragments使用方法
短信预约 -IT技能 免费直播动态提醒
概述
- 可以将子列表分组，而无需向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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
