react todolist遇到的問題

2022-08-17 23:54:18 字數 2672 閱讀 6850

用webpack+bable+react搭建環境

基於上面的環境寫了乙個增刪的demo

使用react devtools除錯工具進行react除錯

遇到的問題:

1. node_modules/localdb/index.js檔案有問題

2. 新建乙個物件時,物件名稱應該首字母大寫,例如this.db = new localdb('react-todos');

3. pakeage.json 載入的模組有問題。有些不用載入 (包的版本有限制)

"devdependencies":

2. this.setstate();
1. 只有setstate()函式才能自動呼叫render函式,渲染ui潔面;

2. this.state.todos.push(todoitem);會改變todos,但是不會自動呼叫render函式,渲染ui介面

3. 一旦資料增加和刪除,都應該記得修改資料庫
this.db.set('todos', this.state.todos);
4. tododonecount: (this.state.todos && this.state.todos.filter((todo)=>todo.isdone)).length || 0
1. 邏輯與和邏輯或只有當在if語句中時,返回的才是布林型別,在其他情況下,其實相當於條件語句

2. 例如:var a=3||4; //結果a=3. (短路運算)

3. 例如:var a=2&&3; //結果a=3 (前面為真,才會走後面,相當於if語句,為真時走後面)

5. 匯出元件的兩種方式
1. class todoheader extends react.component {}    export default todoheader;

2. export default class todoitem extends react.component{}

6. 最外層父元件

7. 元件

1. 父元件:管理和控制資料

2. 子元件:顯示和運算元據

8. state和props的區別
1. state:控制項內部的資料——————(變化的)———(類似標誌位)

2. props:控制外部對內部傳遞的資料———(不變化的)———(類似自定義屬性)

3. 解釋:對於父元件來說,要儲存todolist的資料,那就是內部資訊,要用state來儲存;而如果父元件要將todolist資料傳遞給子元件,對子元件來說,那就是傳遞來的外部資訊

9. 新學到的函式
1. filter():filter方法會建立乙個新陣列,新陣列的元素是符合條件的元素,此處return true---->todo.isdone=false;就是符合條件的, 未完成的就是filter新生成的陣列

1. let todos = this.state.todos.filter(todo => !todo.isdone);

2. every():// every()是用來測試陣列中的每一項是否滿足條件 當所有的項都滿足條件時返回true

1. if (this.state.todos.every((todo) => todo.isdone))

10. react裡面寫樣式
1. 

2. 刪除

3. 類名要用classname

11. 獲取真實的dom節點,要使用ref屬性
1. 刪除

2. react.finddomnode(this.refs.deletebtn).style.display='inline';

12. 擴充套件運算子的使用:
var props = 

1. 下面兩句話等價

// spread操作符

13. react developer tools不能使用時,解決辦法:設定-擴充套件程式-react-devtools-允許訪問檔案位址-前面☑️

14. 給todolist增加了修改功能

//修改當前的任務,傳遞給todoitem元件的方法

modifytodo(index)

this.state.todos.splice(index,1,modifyitem);

this.setstate();

this.db.set('todos',this.state.todos);

}

出現的問題:當點選彈框取消按鈕時,原有記錄為空,修改後的**:

//修改當前的任務,傳遞給todoitem元件的方法

modifytodo(index)

if(value));

this.db.set('todos',this.state.todos);

}}

react-todos入門例子

使用react並做乙個簡單的to-do-list

react建立元件的三種方式及其區別

從頭建立乙個基於 react, webpack, babel 的模板專案

react developer tools除錯工具

zsn分享的webpack搭建react專案環境一

React todolist例子 傳參傳方法

分三個元件 父元件 index.jsx 和兩個子元件 addlist.jsx,todolist.jsx 父元件傳子元件的方法有兩個 第一種 props方式 傳值如 data是父類constructor 傳方法如 子類開始呼叫 傳值 this.props.fffsss就能獲取值 傳方法 this.pr...

SpringCloud GateWay遇到的問題

我們為了解決跨域問題 首先我們配置好了vue前端頁面,讓所有的請求都通過閘道器進行訪問 所有的應用都通過gateway去訪問。1將gateway配置到nacos中去。spring.cloud.nacos.discovery.server addr 127.0.0.1 8848 server.port...

ios 遇到引用 a庫遇到的問題

最近ios開發專案,遇到了,在device執行和模擬器執行都需要引用.a庫,兩個庫的名字相同,分別放在了連個資料夾下面。但是執行起來的時候總是報錯。說明是引用庫的問題。因為是在真機執行可以通過,但是模擬器編譯出錯,說是引用庫的指示問題。聽取其他同時的意見刪除了,資料夾指引真機的庫,在模擬器環境下編譯...