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. SQL server的GO用法--巨坑

    SQL脚本是一种用SQL语言写的批处理文件(.sql),SQL脚本通常可以由SQL查询分析器来执行. ================================================= ...

  2. Day13有参装饰器,三元表达式,匿名函数

    多个装饰器: 加载顺序:由下而上 执行顺序:由上而下 有参装饰器: 闭包,给函数传参的一种方法 当装饰器内需要参数时,可以采用闭包形式给其传参,第三层函数接收完参数时,就变为无参装饰器 三元表达式: ...

  3. ORACLE常用修改字段脚本

    describe employees; = select column_name,data_type,nullable,data_length,data_ precision,data_scale f ...

  4. 服务不支持 chkconfig 的解决方法

    “服务不支持 chkconfig”: 请注意检查脚本的前面,是否有完整的两行:#chkconfig: 2345 80 90    #description:auto_run 在脚本前面这两行是不能少的 ...

  5. python常见陷阱

    copy to https://pythonguidecn.readthedocs.io/zh/latest/writing/gotchas.html 大多数情况下,Python的目标是成为一门简洁和 ...

  6. 00048_this关键字

    1.this调用构造方法 (1)构造方法之间的调用,可以通过this关键字来完成: (2)构造方法调用格式 this(参数列表); (3)小案例 class Person { // Person的成员 ...

  7. 6,id 小数据池,编码and解码。

    asscii :8位(数字,英文,特殊字符)表示一个字符. A:0000 0001 unicode :(万国码)初期:16位,两个字节,表示两个字符. A:0000 0001 0000 0001 中: ...

  8. vim使用技巧二 模式

    第一部分模式 第2章  普通模式 打开vim的默认状态即为普通模式   普通模式的命令强大  很大程度源于可以把操作符与动作命令结合在一起 技巧7 停顿时请移开画笔   工欲善其事,必先利其器   准 ...

  9. 【C#】C#数据类型和VB的区别

    导读:看完了C#,需要总结的有很多东西.开始没有怎么在意,根本没有意识到,那些视频是教给了我一种新的编程语言,我就真的是像看电视剧一样的看完了.猛然想起了学过的VB,这是目前为止,我接触到的仅有的语言 ...

  10. shell的while循环

    while循环用于不断执行一系列命令,也用于从输入文件中读取数据:命令通常为测试条件.其格式为: while command do    Statement(s) to be executed if ...