react里面Fragments的使用
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>
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>
</>
)
}
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
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>
]
)
}
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的使用的更多相关文章
- React 顶层 API
概览 组件 使用 React 组件可以将 UI 拆分为独立且复用的代码片段,每部分都可独立维护.你可以通过子类 React.Component 或 React.PureComponent 来定义 Re ...
- React && ReactDOM
如果你是 React 的初学者,一定会对 React 和 ReactDOM 感到迷惑.为什么要分成两个包呢?害得我还要引入两次,说好的减轻开发人员负担呢,这丫的在搞什么飞机.带着这个疑问,我们一起来康 ...
- Vue躬行记(2)——指令
Vue不仅内置了各类指令,包括条件渲染.事件处理等,还能注册自定义指令. 一.条件渲染 条件渲染的指令包括v-if.v-else.v-else-if和v-show. 1)v-if 该指令的功能和条件语 ...
- 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件
React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...
- [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 ...
- React 在服务端渲染的实现
原文地址:Server-Side React Rendering 原文作者:Roger Jin 译者:牧云云 React 在服务端渲染的实现 React是最受欢迎的客户端 JavaScript 框架, ...
- [译文]React v16(新特性)
[译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...
- React版本更新及升级须知(持续更新)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: center; font: 18.0px "PingFang SC Semibold& ...
- React简明学习
前面的话 React让组件化成为了前端开发的基本思路,比传统思路可以更好的控制前端复杂度,旧的开发方法受到了影响,如分离式的HTML/CSS.非侵入式JS.模板语言.MVC.CSS文件.Bootstr ...
随机推荐
- C实现shell管理的一个例子
通常情况下,一个进程(比如cat /tmp/tt.txt)的输出与输入是标准输入(stdin或者0).标准输出(stdout或者1) shell 获取tt.txt文件中包含aa的行记录,涉及两个进程, ...
- 安装tomcat时遇到的问题
1.刚开始在eclipse配置的tomcat是免安装的,后来提示 所以后来配置了一个安装版的. 2.后来运行server发现报错:8080,8005,端口被占用,然后关闭xammp上的server,然 ...
- ubuntu 常用安装软件
1. Ubuntu安装chrome. sudo apt-get install chromium-browser w
- python绘制动态图
1.需要注意的问题 解决 MatplotlibDeprecationWarning: Using default event loop until function specific to this ...
- python单元测试框架-unittest(四)之用例综合框架管理
简述为何如要框架? 前面测试用例与执行都是写在一个文件,当用例数量不断增加的时候,用例的执行与管理变得非常麻烦,因此需要对用例根据具体的功能模块来使用单独的模块来管理.就像一所学校要根据不同年级进行分 ...
- Tomcat WEB搭建+Nginx负载均衡动静分离+DNS解析的实验
实验拓扑图: 实验环境: 在VMware workstation搭建虚拟环境,利用网络适配器的Nat和桥接模式模拟内网和外网环境. 实验过程中需要安装的工具包包括:vim unzip lrzsz ls ...
- Kudu1.1.0 、 Kudu1.2.0 Kudu1.3.0的版本信息异同比较
不多说,直接上干货! Kudu1.1.0 新特性 python API升级,具备JAVA C++client一样的功能(从0.3版本直接升级到1.1),主要的点如下: 1.1. 改进了Parial ...
- Datastructure
时间复杂度的计算 计算最坏情况下执行语句的次数(含有n) 去掉常数项, 只保留最高项, 去掉系数 最后的结果一般是1, logn, n, nlogn, n^2, 2^n, n!, n^n 时间复杂度所 ...
- Entity Framework Many to Many Relation Mapping(Entity Framework多对多关系映射)
通常我们在做数据库设计时都会有两张表是多对多关系的时候,在数据库做多对多关系时候我们通常通过中间关联表来处理,那我们现在在EF中是如何处理的呢? 假设我们有如下关系,用户(User)包含多个角色(Ro ...
- 使用DOS批处理更改IP地址
有时候电脑在家需要自动获取IP,在公司需要手动填写IP,改来改去很麻烦,于是做一个批处理一键修改很方便: @echo off cls color 0A @echo off echo. echo === ...