react系列（11）.map方法处理数组数据

布满荆棘的人生 2021-09-14 10:26 340阅读 0赞

在实际的项目开发过程中，以数组为格式对组件进行渲染的情况是经常出现的，如裂变的渲染。在React中，如果数组项item不为元素标签时，通常用arr.map(function (item,index) \{ return 组件或元素 \})遍历数组并渲染。

当数组项为字符串时：

var Demo1 = React.createClass({
    	render:function(){
    		var names = ['Alice', 'Emily', 'Kate'];
    		return (
    			<div>
    				{
    					names.map(function (name,index) {
    						var theKey = "key"+index;
    			      		return <div key={theKey}>Hello, {name}!</div>
    			    	})
    				}
    			</div>
    		);
    	}
    });
    ReactDOM.render(<Demo1 />,document.getElementById("example"));

当数组项为标签元素时：

var Demo2 = React.createClass({
    	render:function(){
    		var arr = [
    			<h1 key="key1">Hello World</h1>,
    			<h2 key="key2">Hello World</h2>
    		];
    		return (
    			<div>{arr}</div>
    		);
    	}
    });
    ReactDOM.render(<Demo2 />,document.getElementById("example"));

当数组项为对象时：

var LiItem = React.createClass({
        render: function() {
          return <li>{this.props.data.name}</li>;
        }
    });
    var App = React.createClass({
        render: function () {
          return (
            <ul>
                {
    	            this.props.results.map(function(result,index){
    	            	return <LiItem key={result.id} data={result} />;
    	            })
                }
            </ul>
          );
        }
    });
    var results = [
        {id:'key1', name:'key1_data'},
        {id:'key2', name:'key2_data'},
        {id:'key3', name:'key3_data'}
    ];
    ReactDOM.render(
    	<App results={results} />,
    	document.getElementById('example')
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，340人围观）

还没有评论，来说两句吧...

相关阅读

相关数组之map方法详解

原理： map作用是映射调用此方法的数组，不会改变原始数组，返回原始数组每一项的操作，组成一个新数组，长度和原始数组一致方法： Array.map((

桃扇骨/ 2024年04月08日 13:29/ 0 赞/ 18 阅读

相关 python数组循环处理方法

本文主要介绍python数组循环语法。主要方式有元素遍历，索引遍历，enumerate, zip, list内部等。普通循环 <table> <tbody> <

墨蓝/ 2024年03月31日 12:27/ 0 赞/ 12 阅读

相关 Java基础系列11-数组简介

文章目录一.数组概述二.数组初始化 2.1 动态初始化 2.2 数组内存结构 2.3 静态初始化 2

向右看齐/ 2022年09月04日 11:44/ 0 赞/ 133 阅读

相关 springMVC笔记系列(14)——模型数据处理篇之 Map

说明：本文章的内容转载至：[https://my.oschina.net/happyBKs/blog/420310][https_my.oschina.net_happyBKs

￡神魔★判官ぃ/ 2022年07月14日 07:53/ 0 赞/ 98 阅读

相关使用数组处理数据

我的数组初体验：使用数组保存用户输入的数据，当输入完毕后分别正向和反向输出 include<stdio.h> include<stdlib.h>

雨点打透心脏的1/2处/ 2022年04月22日 11:30/ 0 赞/ 130 阅读

相关 11、React系列之 state状态

> 版权声明：本文为博主原创文章，未经博主允许不得转载。 PS:转载请注明出处作者:TigerChain 地址:http://www.jianshu.com/p/44a78

野性酷女/ 2022年03月16日 10:51/ 0 赞/ 252 阅读

相关 react map遍历，react native map遍历

react map遍历（截取部分重要代码） {this.state.images.map((img, i) => { return (

红太狼/ 2022年03月01日 12:46/ 0 赞/ 257 阅读

相关 React 与 Redux 中的数组处理

本文将介绍一些常用的数组处理函数和语法，如reduce()、filter()、map()、every()、some()、展开运算符。这些知识和React与Redux本身没

你的名字/ 2021年09月24日 11:22/ 0 赞/ 275 阅读

相关 react系列（11）.map方法处理数组数据

在实际的项目开发过程中，以数组为格式对组件进行渲染的情况是经常出现的，如裂变的渲染。在React中，如果数组项item不为元素标签时，通常用arr.map(function (

布满荆棘的人生/ 2021年09月14日 10:26/ 0 赞/ 341 阅读

相关 JavaScript 数组处理方法总结

数组处理方法 //定义数组 var array = []; undefined //查看类型

缺乏、安全感/ 2021年09月11日 08:08/ 0 赞/ 455 阅读