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 ...
随机推荐
- 7.JSP简介
---恢复内容开始--- 1.JSP简介 Java动态网页技术标准(Java Server Pages)是基于Servlet技术以及整个Java体系的Web开发技术是用于动态生成HTML文档的Web页 ...
- classloader 学习
classloader就是把类文件加载到jvm中供虚拟机使用,先看一个magic小例子: 首先,我定义一个alex/vicky包,然后在这个包内定义一个接口: public interfaceISer ...
- 转 OGG-01224 TCP/IP error 111 (Connection refused); retries exceeded.
https://blog.csdn.net/yabingshi_tech/article/details/40620351 在源端启动goldengate pump进程,状态起初是running,后来 ...
- VS 开发中觉得不错的几款插件
1.C# Outline 2013 {}折叠 2.Indent Guides:为缩进添加竖直线 3.ResXManager:多语言资源文件编辑 4.C# Formatter:代码清理 5.Highl ...
- 安装Office 2013 时提示找不到 Office.zh-cn\OfficeLR.cab
今天安装office2013的时候总是过会就提示找不到OfficeLR.cab文件 在网上找了好多方法不行,后来将注册表里的office选项全部删除就可以了(HKEY_CURRENT_USER\Sof ...
- python_字典 学习
一.创建字典(关联数组或hash表) 字典由键(key)和对应的值(values)组成. 代码: dic = { ‘ name‘:1 , ‘ zhang ’:2 , ‘ age‘ :3 , ‘ sex ...
- 办公开发环境(外接显示屏,wifi热点)
笔记本电脑怎样外接显示器 https://jingyan.baidu.com/article/3c48dd34495247e10ae35879.html?qq-pf-to=pcqq.c2c 怎样在Wi ...
- maya2017安装失败如何卸载重装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- LeetCode 704.二分查找(C++)
给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1. 示例 1: 输入: num ...
- 数据结构之C语言模拟整数数组实现
#include <stdio.h> #include <malloc.h> #include <stdlib.h> typedef struct Arr { in ...