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

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

当数组项为字符串时：

var Demo1 = React.createClass({
	render:function(){
		var names = ['Alice', 'Emily', 'Kate'];
		return (
			

				{
					names.map(function (name,index) {
						var theKey = "key"+index;
			      		return 
Hello, {name}!
			    	})
				}
			
		);
	}
});
ReactDOM.render(,document.getElementById("example"));

当数组项为标签元素时：

var Demo2 = React.createClass({
	render:function(){
		var arr = [
			
Hello World
,
			
Hello World
		];
		return (
			
{arr}
		);
	}
});
ReactDOM.render(,document.getElementById("example"));

当数组项为对象时：

var LiItem = React.createClass({
    render: function() {
      return 
{this.props.data.name}
;
    }
});
var App = React.createClass({
    render: function () {
      return (
        

            {
	            this.props.results.map(function(result,index){
	            	return ;
	            })
            }
        
      );
    }
});
var results = [
    {id:'key1', name:'key1_data'},
    {id:'key2', name:'key2_data'},
    {id:'key3', name:'key3_data'}
];
ReactDOM.render(
	,
	document.getElementById('example')
);

 

转载于:https://my.oschina.net/u/3987720/blog/2962540