React入門 二 建立乙個評論模組

2021-07-09 07:12:09 字數 1677 閱讀 9547

首先我們建立乙個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....