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. iOS设置UINavigationBar 的样式

    为了方便演示,我用storyBoard建立了一个基本的导航栏 并在代码中获得了NavgationBar UINavigationBar *bar = self.navigationController ...

  2. 剑指offer重构二叉树 给出二叉树的前序和后序重构二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树. 假设输入的前序遍历和中序遍历的结果中都不含重复的数字. 例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4, ...

  3. ASP.NET MVC中如何在当前页面上弹出另外一个页面

    注意:不是链接到另一个页面,而是弹出一个页面,当前的页面和弹出页面都存在于浏览器的同一个标签页中,效果如图: 弹出的窗体置于四大天王页面之上,但是无法继续操作底层的页面,代码如下: function ...

  4. 在oracle中怎么通过字段名查询其所在的表

    ora = //连接描述符名:ora (description = //描述 (address = //网络地址之一 (protocol = tcp) //网络协议(tcp表示TCP/IP协议) (h ...

  5. 出现Android.os.NetworkOnMainThreadException 错误

    两种方法解决: 1.如果用的gradle打包,在build.gradle中修改配置 修改SDKVersion 为低版本(7),不能版本降低过多,否则会出现很多不适配. 2.将网络访问放在一个新的线程中 ...

  6. 初学划分树,小见解之!POJ-2104/HDU-2665

    划分树 本来是学主席树的,可怜我等巨弱观群巨博客难解fotle主席的思想精髓.于是学了一下划分树,嗯,花了一下午时间理解build(其实自己模拟一遍就通了),我很难理解为什么划分树会看不懂而能学会主席 ...

  7. 机器学习实战之kNN算法

    机器学习实战这本书是基于python的,如果我们想要完成python开发,那么python的开发环境必不可少: (1)python3.52,64位,这是我用的python版本 (2)numpy 1.1 ...

  8. Codeforces 545E. Paths and Trees[最短路+贪心]

    [题目大意] 题目将从某点出发的所有最短路方案中,选择边权和最小的最短路方案,称为最短生成树. 题目要求一颗最短生成树,输出总边权和与选取边的编号.[题意分析] 比如下面的数据: 5 5 1 2 2 ...

  9. ios sqlite 简单使用

    // // ViewController.m // sqlitedemo // // Created by lam_TT on 15-4-11. // Copyright (c) 2015年 lam_ ...

  10. 【Luogu】P3116会议时间(拓扑排序,DP)

    题目链接 本题使用拓扑排序来规划DP顺序.设s[i][j]表示i步是否能走到j这个点,e[i][j]表示i步是否能走到j这个点——用第二条路径.因为要满足无后效性和正确性,只有第i个点已经全部更新完毕 ...