react map 遍历
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 遍历的更多相关文章
- react.js map遍历的问题
React遍历多个Ant Design中的Upload组件时,随意删除任一个Upload出现了bug,依次点击上传图片后,当点击删除时,倒着删除没有问题,从中间和从开头删问题出现了,出现了类似塌方的效 ...
- 应该用forEach改变数组的值吗? 原生JS forEach()和map()遍历的异同点
应该用forEach改变数组的值吗? https://segmentfault.com/q/1010000013170900?utm_source=index-hottest 由于js中的数组是引用类 ...
- 分页查询和分页缓存查询,List<Map<String, Object>>遍历和Map遍历
分页查询 String sql = "返回所有符合条件记录的待分页SQL语句"; int start = (page - 1) * limit + 1; int end = pag ...
- js中三个对数组操作的函数 indexOf()方法 filter筛选 forEach遍历 map遍历
indexOf()方法 indexOf()方法返回在该数组中第一个找到的元素位置,如果它不存在则返回-1. 不使用indexOf时 var arr = ['apple','orange','pea ...
- map遍历的四种方式
原文 http://blog.csdn.net/dayanxuqun/article/details/26348277 以下是map遍历的四种方式: // 一.推荐只用value的时候用,都懂的... ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- map遍历性能记录
map遍历可以通过keySet或者entrySet方式. 性能上:entrySet略胜一筹,原因是keySet获取到key后再根据key去获取value,在查一遍,所以慢一些. keySet: //先 ...
- forEach() 和 map() 遍历
1.forEach() 没有返回值. arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项, i ...
- js的map遍历和array遍历
1. array遍历: [1].forEach() forEach是ES5中操作数组的一种方法,主要功能是遍历数组.forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第 ...
随机推荐
- LeetCode(110) Balanced Binary Tree
题目 Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bina ...
- Repo command reference
Repo command reference In this document init sync upload diff download forall prune start status Rep ...
- tab栏切换效 简易效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 也来“玩”Metro UI之磁贴(一)
Win8出来已有一段时间了,个人是比较喜欢Metro UI的.一直以来想用Metro UI来做个自己的博客,只是都没有空闲~~今天心血来潮,突然想自己弄一个磁贴玩玩,动手……然后就有了本篇. Win8 ...
- ios弹性头部
很久没写博客了,金天有点时间来写下,一直觉得弹性头部很炫,看起来高大上,写起来蛮简单的 层次分析 一共有3层,最底部是图像层,中间是scrollView或者它的子类,最上层是scrollView上面添 ...
- iOS学习笔记19-地图(一)定位CoreLocation
一.定位介绍 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.要实现 ...
- 【bzoj2901】矩阵求和 前缀和
题目描述 给出两个n*n的矩阵,m次询问它们的积中给定子矩阵的数值和. 输入 第一行两个正整数n,m. 接下来n行,每行n个非负整数,表示第一个矩阵. 接下来n行,每行n个非负整数,表示第二个矩阵. ...
- 浅谈中途相遇攻击--meet-in-the-middle attack
貌似挖的坑也够多了....好多都没填,这篇最后会不会TJ还得看心情TUT 看过大白书的人应该都会发现一种神奇的算法:中途相遇法.(在第58页)这种算法将以空间换时间的思路运用到了极致,但事实上它在密码 ...
- 刷题总结——火柴排队(NOIP2013)
题目: 题目背景 NOIP2013 提高组 Day1 试题 题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度.现在将每盒中的火柴各自排成一列,同一列火柴的高度互不相同,两列火柴之间 ...
- TeraTerm设定(解决日文乱码问题)
首先,字体Font的MS Gothic是有Japanese的,设置为这个比较保险. 其次,在General Setup里将Language设为:English. 原理是什么我也不清楚,试了几个选择,就 ...