react新手学习笔记

使用组件内建立的数组属性来调用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>
    );
});

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