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. python--前端CSS

    一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...

  2. Python9- 生成器函数进阶-day14

    生成器进阶#send的获取下一个值的效果和next基本一致,#只不过在获取下一个值的时候,给上一个值的位置穿第一个数据 使用send的注册事项: #第一次使用生成器的时候,必须用next获取下一个值 ...

  3. java中的equals与==的区别

    equals是Object类的公共方法,方法内部是用==实现的.但是很多类都重写了equals方法,例如基本数据类型的封装类和String类,重写后比较的是对象的值或者内容是否相同.而==是比较地址, ...

  4. linux 系统备份还原

    操作系统或文件备份 tar cvpzf backup.tgz --exclude=/proc --exclude=/lost+found --exclude=/backup.tgz --exclude ...

  5. HDU-4825 Xor Sum,字典树好题!

    Xor Sum 一遍A了之后大呼一声好(keng)题!debug了两小时~~~~百度之星资格赛,可以. 题意:给你一个n个元素的数组,m次查询,每次输入一个数k要求从数组中找到一个数与k异或值最大,输 ...

  6. mysql5.7.20搭建

    官网mysql下载源码安装 下载MySQL5.7.20源码包,wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.20.tar.g ...

  7. Codeforces Round #360 (Div. 2)——C. NP-Hard Problem(BFS染色判二分图)

    C. NP-Hard Problem time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  8. 【NOI Linux】复习一波命令行

    $linux$ 终端真是用不惯. 假设 a 是一个可执行文件( $linux$ 下的可执行文件没有后缀 ) 1. size a 计算一个程序的静态内存(全局数组变量.栈空间.堆空间等),单位是字节.除 ...

  9. [暑假集训--数位dp]hdu2089 不要62

    杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer).杭州交通管理局经常会扩充一些的士车牌照,新近出来一个好消息,以后上牌照,不再含有不吉利的数字了,这样一来,就可以消除个别的士司机和乘客的心理障碍, ...

  10. request response session的常用方法

    .request对象 客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例. 序号 方 法 说 明 1 object ...