1.map方法

注:map 返回的是一个新数组

class App extends Component {
// constructor(props) {
// super(props);
// this.state = {
// arr: ['aaa','bbb','ccc']
// };
// } state = {
arr: ['aaa','bbb','ccc']
} render() {
return (
<div>
{
this.state.arr.map(function(item,index) { // map 返回的是一个新数组
return <div className="app-item" key="index">{item}</div>
})
}
</div>
);
}
}

2.for 循环

var arr = ['111','222','333'];
var names = [];
for(var i=0; i<arr.length; i++){
names.push(<div key={i}>{arr[i]}</div>)
} ReactDOM.render(
<div>
{names}
</div>
, document.getElementById('root'));

.

react map 遍历的更多相关文章

  1. react.js map遍历的问题

    React遍历多个Ant Design中的Upload组件时,随意删除任一个Upload出现了bug,依次点击上传图片后,当点击删除时,倒着删除没有问题,从中间和从开头删问题出现了,出现了类似塌方的效 ...

  2. 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点

    应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...

  3. 分页查询和分页缓存查询,List<Map<String, Object>>遍历和Map遍历

    分页查询 String sql = "返回所有符合条件记录的待分页SQL语句"; int start = (page - 1) * limit + 1; int end = pag ...

  4. js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历

     indexOf()方法  indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...

  5. map遍历的四种方式

    原文 http://blog.csdn.net/dayanxuqun/article/details/26348277 以下是map遍历的四种方式: // 一.推荐只用value的时候用,都懂的... ...

  6. 原生JS forEach()和map()遍历的区别以及兼容写法

    一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...

  7. map遍历性能记录

    map遍历可以通过keySet或者entrySet方式. 性能上:entrySet略胜一筹,原因是keySet获取到key后再根据key去获取value,在查一遍,所以慢一些. keySet: //先 ...

  8. forEach() 和 map() 遍历

    1.forEach()   没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项, i ...

  9. js的map遍历和array遍历

    1. array遍历: [1].forEach() forEach是ES5中操作数组的一种方法,主要功能是遍历数组.forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第 ...

随机推荐

  1. day23 03 组合的例子

    day23 03 组合的例子 一.用到组合的方式,编写一个圆环,并能够计算出它的周长和面积 from math import pi # 从内置函数里面导入pi # 先定义一个圆类 class Circ ...

  2. 小数据池 is 和 ==的区别

    小数据池 一.小数据池 1)代码块 python程序是由代码块构成的,一个代码块的文本作为pythont程序执行的单元 官方文档: A Python program is constructed fr ...

  3. (转))iOS App上架AppStore 会遇到的坑

    iOS App上架AppStore 会遇到的坑   前言:非原创 文章摘自:http://zhuanlan.zhihu.com/100000PM/20010725 相信大家一定非常「深恶痛疾」AppS ...

  4. Mac下Python和Pycharm之virtualenv

    一.python如何配置virtualenv   1.安装virtualenv pip3 install virtualenvpip install -i https://pypi.tuna.tsin ...

  5. Knockout v3.4.0 中文版教程-9-计算监控-API参考

    5.参考 下面的内容描述了如何构建和使用计算监控. 1. 构建一个计算监控 可以用如下的形式构建一个计算监控: ko.computed( evaluator [, targetObject, opti ...

  6. 自动化运维之shell引号和正则表达式(二)

    1 shell引号 1)反斜线\ 转译 echo * 显示当前目录中所有的文件列表 echo \* 显示*字符 换行 find / \ 换行输入多行命令 > -name "test.t ...

  7. Lucas定理详解

    这篇博客是从另一位园友那里存的,但是当时忘了写原文的地址,如果有找到原文地址的请评论联系! Lucas定理解决的问题是组合数取模.数学上来说,就是求 \(\binom n m\mod p\).(p为素 ...

  8. Nearest Common Ancestors(poj 1330)

    题意:给定一棵树,询问两个节点的最近公共祖先. 输入:第一行T,表示测试组数. 每组测试数据包含一个n,表示节点数目,下面n-1行是连接的边,最后一行是询问 输出:共T行,代表每组的测试结果 /* 倍 ...

  9. Linux主机被SSH精神病(Psychos)暴力攻破后成为肉鸡的攻防过程

    近日公司局域网突然变得非常慢,上网受到很大影响,不仅仅是访问互联网慢,就连访问公司内部服务器都感到异常缓慢.于是对本局域网网关进行测试:   $ ping 10.10.26.254   发现延时很大, ...

  10. 学习技术的三部曲:WHAT、HOW、WHY

    ★第一步:WHAT 所谓的“WHAT”也就是“What is it?”——这是最简单的层次.在这个层次,你要搞清楚某个东东是[什么]样子的?有[什么]用处?有[什么]特性?有[什么]语法?...... ...