关于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. C实现shell管理的一个例子

    通常情况下,一个进程(比如cat /tmp/tt.txt)的输出与输入是标准输入(stdin或者0).标准输出(stdout或者1) shell 获取tt.txt文件中包含aa的行记录,涉及两个进程, ...

  2. 安装tomcat时遇到的问题

    1.刚开始在eclipse配置的tomcat是免安装的,后来提示 所以后来配置了一个安装版的. 2.后来运行server发现报错:8080,8005,端口被占用,然后关闭xammp上的server,然 ...

  3. ubuntu 常用安装软件

    1. Ubuntu安装chrome. sudo apt-get install chromium-browser w

  4. python绘制动态图

    1.需要注意的问题 解决 MatplotlibDeprecationWarning: Using default event loop until function specific to this ...

  5. python单元测试框架-unittest(四)之用例综合框架管理

    简述为何如要框架? 前面测试用例与执行都是写在一个文件,当用例数量不断增加的时候,用例的执行与管理变得非常麻烦,因此需要对用例根据具体的功能模块来使用单独的模块来管理.就像一所学校要根据不同年级进行分 ...

  6. Tomcat WEB搭建+Nginx负载均衡动静分离+DNS解析的实验

    实验拓扑图: 实验环境: 在VMware workstation搭建虚拟环境,利用网络适配器的Nat和桥接模式模拟内网和外网环境. 实验过程中需要安装的工具包包括:vim unzip lrzsz ls ...

  7. Kudu1.1.0 、 Kudu1.2.0 Kudu1.3.0的版本信息异同比较

    不多说,直接上干货!  Kudu1.1.0 新特性 python API升级,具备JAVA C++client一样的功能(从0.3版本直接升级到1.1),主要的点如下: 1.1. 改进了Parial ...

  8. Datastructure

    时间复杂度的计算 计算最坏情况下执行语句的次数(含有n) 去掉常数项, 只保留最高项, 去掉系数 最后的结果一般是1, logn, n, nlogn, n^2, 2^n, n!, n^n 时间复杂度所 ...

  9. Entity Framework Many to Many Relation Mapping(Entity Framework多对多关系映射)

    通常我们在做数据库设计时都会有两张表是多对多关系的时候,在数据库做多对多关系时候我们通常通过中间关联表来处理,那我们现在在EF中是如何处理的呢? 假设我们有如下关系,用户(User)包含多个角色(Ro ...

  10. 使用DOS批处理更改IP地址

    有时候电脑在家需要自动获取IP,在公司需要手动填写IP,改来改去很麻烦,于是做一个批处理一键修改很方便: @echo off cls color 0A @echo off echo. echo === ...