首先我們建立乙個comment class:
var comment = react.createclass();}
});
var commentlist = react.createclass(
});
建立乙個表單:
var commentform = react.createclass(
});
var commentbox = react.createclass(
});
在瀏覽器裡,我們可以看到已經出現了兩條資料。
src="">
script>
src="">
script>
var comment = react.createclass();}
});
this is one commentp>
this is antherem> commentp>
var comment = react.createclass();
return ;
},render: function
() />);}
});
var
data = [
,];
我們修改reactdom.render,將陣列傳給commentbox
reactdom.render(
data = />,
document.getelementbyid('example')
);
再修改commentbox,將陣列傳給commentlist
var commentbox = react.createclass(/>
div>);}
});
最後修改commentlist,直接放進乙個陣列
"font-size:12px;">var commentlist = react.createclass(
);});
return(
"commentlist">);
}});
可以看到,在commentlist這個元件中的render方法中,我們使用了array.prototype.map = function(callback,thisarg){};這個方法,建立了乙個裝載
comment元件的陣列,這個方法好像是es5中新增的,在遍歷陣列的同時可以使用callback方法對陣列中的元素進行處理,還可以將處理後的資料再次裝載到乙個陣列中:
var data1 = [,,
,];var s = data1.map(function
(comment) );
console.log("s:" + s);
可以看到,我們呼叫data1.map,當callback方法中有return的時候,就將這些return的放入到了s陣列中,列印出來的結果是
s
:1字尾,2字尾,3字尾,4字尾
建立乙個react專案
之前一直在用引包的方法使用react,現在學習react基礎也有一段時間了,想工程化的完成乙個react專案,結果只是搭建react就糾結了好久。參考了很多大佬的方法,但是一直有問題,最後總結一下我的成功辦法吧。在命令列工具中確定node是否已經成功安裝 npm vnode v均出現版本號則說明安裝...
手寫乙個Hexo評論系統(二)
上次總共列出了如下的一些需求,根據這些需求來構想一下如何設計 3 支援文章評分,顯示評分人數和評分的平均分數 首先使用者要一開啟部落格就可以獲得隨機頭像和暱稱,並且要保持這個使用者的狀態,所以整體思路如下 首先對於乙個從未開啟過某篇部落格的頁面的使用者來說,在瀏覽器端儲存的clientid肯定是沒有...
React 入門 做乙個簡單todolist
第一步,看文件,不多說 環境準備 npm start or yarn start npx 是乙個幫你執行檔案的工具 npx 會自動查詢當前依賴包中的可執行檔案,如果找不到,就會去 path 裡找。如果依然找不到,就會幫你安裝!打卡src目錄,只保留index.jsreactdom相關的 index....