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>
    );
});

這樣雖然沒什麼用,,可是警告消失了,,內心也高興一點