react新手学习笔记

摘要: react使用数组的map方法创建组件数组

使用组件内创建的数组属性来调用map,,不知道普通的数组能不能调用成功,,,目测应该能行,,尝试以后再来更改

var Box = React.createClass({
getInitialState: function() {
return {data: [1, 2, 3]};
},
render: function() {
//map方法第一个参数是数组的每一项的值, 第二个参数是每一项的索引
var BlockList = this.state.data.map(function(item, key) {
return (
<div id = {key}>
{item}
</div>
);
});
//返回创建的组件数组, 注意要用一个容器包裹
return (
<div className = "box">
{BlockList}
</div>
);
}
});

如果尝试过以上的代码,,,就会发现会有一个警告,,大约意思是差一个什么叫什么"key"的属性

经过多次试验,,配合相当于无的英语能力猜测意思是,,新建的组件数组内的每个组件要添加一个标识符"key"

试了一下果然

var BlockList = this.state.data.map(function(item, key) {
return (
//添加一个属性
<div id = {key} key = {key}>
{item}
</div>
);
});

这样虽然没什么用,,但是警告消失了,,心里也高兴一点