Fragments

Fragments可以理解成：多个片段，多个部分（React元素返回的Fragments）

在此之前，我们开发的组件 return 的都是单个React元素，想要返回多个元素就必须使用父元素包裹这些子元素，然后返回这个父元素。

然而，这并不总是能满足要求的，例如在下述场景中，嵌套div将导致表格不能正常渲染

class Table extends React.Component {render() {return (<table><tr><Columns /></tr></table>)}
}class Columns extends React.Component {render() {<div><td>Hello</td><td>World</td></div>}
}// 渲染后的 <Table />输出
<table><tr><div><td>Hello</td><td>World</td></div></tr>
</table>

Fragments的出现解决了这样的问题，它可以让React组件返回多个元素而不需要嵌套父元素

用法

class Columns extends React.Component {render() {return (<React.Fragment><td>Hello</td><td>World</td></React.Fragment>)}
}

这样table组件就可以正常的渲染了！

短语法

React提供了一种新的，更加简短的语法来声明Fragments，它看起来就是个空标签！

class Columns extends React.Component {render() {return (<><td>Hello</td><td>World</td></>)}
}

你可以像用其他标签一样来使用它，但注意：它不支持key和属性

带key的Fragments

使用显式的<React.Fragments>语法可以使用key属性。一个示例场景：将一个数组映射到一个Fragments数组，创建一个描述列表。

function Glossary(props) {return (<div>{props.items.map(item => (<React.Fragment key={item.id}><dt>{item.term}</dt><dd>{item.description}</dd></React.Fragment>))}</div>)
}

key是唯一可以传递给Fragment的属性，未来可能会添加其他属性，比如事件。

06 Fragments相关推荐

06.ElasticSearch在Java中的使用
ElasticSearch在Java中的使用引入依赖索引.类型和映射的操作 1.创建客户端操作对象 2.创建索引 3.删除索引 4.创建索引.类型和映射文档的操作 1.准备工作 1. 引入依赖 ...
06 面向对象之：反射，双下方法
一.反射反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它首先被程序语 ...
【跃迁之路】【495天】程序员高效学习方法论探索系列（实验阶段252-2018.06.15）...
@(跃迁之路)专栏实验说明从2017.10.6起,开启这个系列,目标只有一个:探索新的学习方法,实现跃迁式成长实验期2年(2017.10.06 - 2019.10.06) 我将以自己为实验对象. ...
Java虚拟机JVM学习06 自定义类加载器父委托机制和命名空间的再讨论
Java虚拟机JVM学习06 自定义类加载器父委托机制和命名空间的再讨论创建用户自定义的类加载器要创建用户自定义的类加载器,只需要扩展java.lang.ClassLoader类,然后覆盖它的f ...
【跃迁之路】【425天】刻意练习系列184—SQL（2018.04.06）
@(跃迁之路)专栏叨叨两句技术的精进不能只是简单的刷题,而应该是不断的"刻意"练习该系列改版后正式纳入[跃迁之路]专栏,持续更新刻意练习--MySQL 2018.04.02 ...
OD使用教程6 - 调试篇06|解密系列
OD使用教程6 - 调试篇06 让编程改变世界 Change the world by program 这一讲开始,小甲鱼带大家接触真正程序的逆向.其实也没啥大不了的,也就是对之前所学的知识进行巩 ...
【青少年编程】【Scratch】06 侦测模块
06 侦测模块侦测模块是用来检测场景中某一参数的变化,通过参数变化来为下一步操作提供运行依据.通常与控制模块中的条件语句和循环语句一起使用. 具体分为: 与运动相关的侦测: 与按键相关的侦测: 侦测 ...
06 Scratch等级考试（一级）模拟题
Scratch竞赛交流群已成立(适合6至18周岁的青少年),公众号后台回复[Scratch],即可进入.如果加入了之前的社群不需要重复加入. 微信后台回复"资料下载"可获取以往学习 ...
数据结构与算法：06 线性表
06 线性表知识结构: 1. 线性表的定义与操作 1.1 线性表的定义线性表(Linear List)是由n(n≥0)n (n≥0)n(n≥0)个相同类型的数据元素a0,a1,⋯,an−1a_0, ...

06 Fragments

Fragments

用法

短语法

带key的Fragments

06 Fragments相关推荐

最新文章

热门文章