关于react Fragments,React 中一个常见模式是为一个组件返回多个元素。Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
但是我在实际运用中,碰到了问题,比如一组单选按钮
<RadioGroup defaultValue={this.state.flag} size="large">
<RadioButton value="1" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(1)+' fs16'} />
</RadioButton>
<RadioButton value="2" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(2)+' fs16'} />
</RadioButton>
<RadioButton value="3" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(3)+' fs16'}/>
</RadioButton>
<RadioButton value="4" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(4)+' fs16'}/>
</RadioButton>
<RadioButton value="5" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(5)+' fs16'}/>
</RadioButton>
</RadioGroup>
所有的单选按钮是有规律可选,为了优化代码,我打算进行简写,提到一个方法里面,提到方法后,不能用容器去包裹这些RadioButton,包裹后,这个组件的一些功能会失效,比如默认选中,所以只能用空标签,想到了之前看到的flagments
https://doc.react-china.org/docs/fragments.html
eg:
radiosBtns(){
return(
<>
<RadioButton value="1" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(1)+' fs16'} />
</RadioButton>
<RadioButton value="2" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(2)+' fs16'} />
</RadioButton>
<RadioButton value="3" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(3)+' fs16'}/>
</RadioButton>
<RadioButton value="4" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(4)+' fs16'}/>
</RadioButton>
<RadioButton value="5" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(5)+' fs16'}/>
</RadioButton>
</>
)
}
我发现报错了

然后查了些资料,找了些方法
 
 
 
第一种,直接返回数据
react 16开始, render支持返回数组,知道这个特性的人不在少数。这一特性已经可以减少不必要节点嵌套,小伙伴们可以多多用起来。
radiosBtns(){
return(
[
<RadioButton value="1" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(1)+' fs16'} />
</RadioButton>,
<RadioButton value="2" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(2)+' fs16'} />
</RadioButton>,
<RadioButton value="3" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(3)+' fs16'}/>
</RadioButton>,
<RadioButton value="4" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(4)+' fs16'}/>
</RadioButton>,
<RadioButton value="5" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(5)+' fs16'}/>
</RadioButton>
]
)
}
以为这样就好了,但是悲剧的是,还是报错了,

Each child in an array or iterator should have a unique "key" prop.数组或迭代器中的每个子元素都应该有一个唯一的“key”,然后我加了key

https://doc.react-china.org/docs/lists-and-keys.html
当元素没有确定的id时,你可以使用他的序列号索引index作为key
如果列表可以重新排序,我们不建议使用索引来进行排序,因为这会导致渲染变得很慢
https://doc.react-china.org/docs/reconciliation.html#%E9%80%92%E5%BD%92%E5%AD%90%E8%8A%82%E7%82%B9
radiosBtns(){
return(
[
<RadioButton value="1" key="1" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(1)+' fs16'} />
</RadioButton>,
<RadioButton value="2" key="2" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(2)+' fs16'} />
</RadioButton>,
<RadioButton value="3" key="3" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(3)+' fs16'}/>
</RadioButton>,
<RadioButton value="4" key="4" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(4)+' fs16'}/>
</RadioButton>,
<RadioButton value="5" key="5" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(5)+' fs16'}/>
</RadioButton>
]
)
}
这样就可以了
第二种,React.Fragment
Flagments的简写形式是<></>,很吊的样子,但目前有些前端工具支持的还不太好,用 create-react-app 创建的项目就不能通过编译,所以这点懒还是不能偷,多写几个字符
radiosBtns(){
return(
<React.Fragment>
<RadioButton value="1" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(1)+' fs16'} />
</RadioButton>
<RadioButton value="2" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(2)+' fs16'} />
</RadioButton>
<RadioButton value="3" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(3)+' fs16'}/>
</RadioButton>
<RadioButton value="4" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(4)+' fs16'}/>
</RadioButton>
<RadioButton value="5" key="5" style={{marginLeft:'10px'}}>
<Icon type="flag" className={flag(5)+' fs16'}/>
</RadioButton>
</React.Fragment>
)
}
这样就可以了

react里面Fragments的使用的更多相关文章

  1. React 顶层 API

    概览 组件 使用 React 组件可以将 UI 拆分为独立且复用的代码片段,每部分都可独立维护.你可以通过子类 React.Component 或 React.PureComponent 来定义 Re ...

  2. React && ReactDOM

    如果你是 React 的初学者,一定会对 React 和 ReactDOM 感到迷惑.为什么要分成两个包呢?害得我还要引入两次,说好的减轻开发人员负担呢,这丫的在搞什么飞机.带着这个疑问,我们一起来康 ...

  3. Vue躬行记(2)——指令

    Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...

  4. 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件

    React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...

  5. [React] Use React Fragments to make your DOM tree cleaner

    In this lesson, we will look at Fragments and how they are useful in achieving a cleaner DOM structu ...

  6. React 在服务端渲染的实现

    原文地址:Server-Side React Rendering 原文作者:Roger Jin 译者:牧云云 React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架, ...

  7. [译文]React v16(新特性)

    [译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...

  8. React版本更新及升级须知(持续更新)

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px "PingFang SC Semibold& ...

  9. React简明学习

    前面的话 React让组件化成为了前端开发的基本思路,比传统思路可以更好的控制前端复杂度,旧的开发方法受到了影响,如分离式的HTML/CSS.非侵入式JS.模板语言.MVC.CSS文件.Bootstr ...

随机推荐

  1. 7.JSP简介

    ---恢复内容开始--- 1.JSP简介 Java动态网页技术标准(Java Server Pages)是基于Servlet技术以及整个Java体系的Web开发技术是用于动态生成HTML文档的Web页 ...

  2. classloader 学习

    classloader就是把类文件加载到jvm中供虚拟机使用,先看一个magic小例子: 首先,我定义一个alex/vicky包,然后在这个包内定义一个接口: public interfaceISer ...

  3. 转 OGG-01224 TCP/IP error 111 (Connection refused); retries exceeded.

    https://blog.csdn.net/yabingshi_tech/article/details/40620351 在源端启动goldengate pump进程,状态起初是running,后来 ...

  4. VS 开发中觉得不错的几款插件

    1.C# Outline 2013  {}折叠 2.Indent Guides:为缩进添加竖直线 3.ResXManager:多语言资源文件编辑 4.C# Formatter:代码清理 5.Highl ...

  5. 安装Office 2013 时提示找不到 Office.zh-cn\OfficeLR.cab

    今天安装office2013的时候总是过会就提示找不到OfficeLR.cab文件 在网上找了好多方法不行,后来将注册表里的office选项全部删除就可以了(HKEY_CURRENT_USER\Sof ...

  6. python_字典 学习

    一.创建字典(关联数组或hash表) 字典由键(key)和对应的值(values)组成. 代码: dic = { ‘ name‘:1 , ‘ zhang ’:2 , ‘ age‘ :3 , ‘ sex ...

  7. 办公开发环境(外接显示屏,wifi热点)

    笔记本电脑怎样外接显示器 https://jingyan.baidu.com/article/3c48dd34495247e10ae35879.html?qq-pf-to=pcqq.c2c 怎样在Wi ...

  8. maya2017安装失败如何卸载重装

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  9. LeetCode 704.二分查找(C++)

    给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target  ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1. 示例 1: 输入: num ...

  10. 数据结构之C语言模拟整数数组实现

    #include <stdio.h> #include <malloc.h> #include <stdlib.h> typedef struct Arr { in ...