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

布满荆棘的人生 2021-09-14 10:26 520阅读 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 条评论，520人围观）

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

相关阅读

相关数组之map方法详解

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

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

相关 JS-数组方法filter和map

一、生成两个数组 var numArr = [1,8,78,115,10,80]; var tlbb = [ { userId:1,name:"乔峰",

Bertha 。/ 2023年07月01日 11:53/ 0 赞/ 150 阅读

相关 js遍历对象数组map方法

![20210115155315751.png][] 所以直接这样写就得到了一个数组。没有必要在里面还写个push： > this.bfintIds = so

青旅半醒/ 2023年01月07日 04:52/ 0 赞/ 452 阅读

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

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

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

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

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

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

相关 11、React系列之 state状态

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

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

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

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

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

相关数组 map() 和 forEach() 方法的区别？

其中两个方法都是遍历数组。 map()方法通过调回回调函数映射每一个元素到新元素上，并且返回的是一个新的数组。 forEach()方法为每个元素回调函数，不会返回新的数

你的名字/ 2022年03月01日 12:10/ 0 赞/ 684 阅读

相关 React 与 Redux 中的数组处理

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

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

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

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

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