React.Fragment

jsx语法，相当于document.createDocumentFragment()
创建文档碎片容器，优化渲染
解决了没有根节点的问题
<></>这种短语法也会声明React.Fragment
但短语法不支持key
React.Fragment只支持key属性，其余属性如事件等不支持

export default class Table extends React.Component {render() {return (<table border="1"><caption>Private Information</caption><thead><tr><TableHeaders /></tr></thead><tbody><tr><TableCells /></tr></tbody></table>)}
}
class TableHeaders extends React.Component {state = {headers: ['Name','ID','Age']}render() {return (<React.Fragment>{this.state.headers.map((item, index) => {return (<th key={index}>{item}</th>)})}</React.Fragment>)}
}class TableCells extends React.Component {state = {headers: ['Jessica','1','18']}render() {return (<React.Fragment>{this.state.headers.map((item, index) => {return (<th key={index}>{item}</th>)})}</React.Fragment>)}
}

export default class MemberList extends React.Component {state = {list: [{id: 1,name: 'Yonna',desc: '主舞'},{id: 2,name: 'Jessica',desc: '主唱'},{id: 3,name: 'Krystal',desc: '忙内'},]}render() {return (<dl>{this.state.list.map(({ id, name, desc }) =><React.Fragment key={id}><dt>{id}:{name}</dt><dd>{desc}</dd></React.Fragment>)}</dl>);}
}

21 Fragment和短语法应用相关推荐

微课|中学生可以这样学Python（例8.21）：选择法排序
适用教材: 董付国,应根球.<中学生可以这样学Python>.清华大学出版社,2017. 第8章常用算法的Python实现例8.21 选择法排序京东购买链接:https://it ...
安卓基础学习 Day 21|Fragment(碎片）
目录 Fragment(碎片) Fragment 静态注册碎片文件碎片布局文件碎片主界面主界面实现效果 Fragment声明周期 Fragment动态注册标签栏显示界面图片和显示的文字 ...
PHPstorm中使用数组短语法[]，出现红色波浪
问题办法因为使用的PHP版本并没有什么问题(使用的PHP版本大于5.4), 原因在PHPstorm支持的PHP的语法等级低于5.4,才导致的这个问题! 打开PHPstorm的file->se ...
52 - 算法 - LeetCode 21 数据结构链表头插法递归
//递归解法可以不借助于另一个指针递归返回现有的变量节点注意返回类型 class Solution {public:ListNode* mergeTwoLists(ListNode* l1, ...
php twig if,如何使用短语法使用Twig检查变量是否存在以及是否为空
如果没有转储扩展, 那么Twig中变量的内容验证可能会非常困难.即使使用它, 有时你也会很懒惰, 并且会假设一些从PHP发送到Twig的变量的内容, 通常, 变量可以为空, 并且根据它, 你可能想做一 ...
java21点牌玩法_扑克牌玩法 21点规则和技巧原来那么多
经常玩纸牌的小伙伴们应该听过一种扑克牌玩法:21点,没有听过的小伙伴们也没有关系,今天小编就给大家介绍一下21点的规则,21点是有概率可遵循的,小编今天教给大家21点的玩法还有技巧,一起学习一下吧. ...
React中的fragment和StrictMode
一.fragment 在之前的开发中,我们总是在一个组件中返回内容时包裹一个div元素: 我们又希望可以不渲染这样一个div应该如何操作呢? 使用Fragment Fragment 允许你将子列表分组 ...
关于FragmentManager动态管理Fragment时Fragment生命周期的探究
Fragment是Android中的重要组件,在Android 3.0的时候添加进来. 关于Fragment的生命周期,我相信了解过的开发人员都应该把以下方法脱口而出:onAttach, onCrea ...
21点：赌场里最可能赢钱的游戏
21 点是赌场里最可能赢钱的游戏,也是那里唯一相对公平的游戏,在采取最佳玩法的情况下,玩家胜率高达 49%.不过要想长期赢钱,这 2% 的劣势也无法容忍,高端赌徒们会用变换赌注或者团体作战的方法把这一 ...

21 Fragment和短语法应用

React.Fragment

21 Fragment和短语法应用相关推荐

最新文章

热门文章