react元件化todolist例項

首先建立react的腳手架 具體建立步驟自己查

首先建立乙個todelist 在src下建立乙個components資料夾 裡面建立乙個todo的資料夾 todo裡面建立乙個index.js檔案這裡是父元件 在裡面寫

此處只是做乙個小例子演示下react的元件化

元件化的理解

1.元件的封裝

檢視 資料 變化邏輯(資料驅動檢視變化)

在react中 this.state就是資料 render中的就是檢視 然後函式中的this.setstate() 這裡只是大概說明下讓自己有個直觀印象 並不說明全部

2.元件的復用

props傳遞

import react, from 'react'

import list from './list/index.js'
import input from 'input/index.js'
class todo extends component
}render()
addtitle(title))
}}

import react, from 'react'

class list extends component
render()
}export default list

import react, from 'react'

class input extends component
}render()
changehandle(event))
}clickhandle())
}}export default input

React 元件化程式設計

父元件與子元件進行互動 我們可以在父元件中設定 state，並通過在子元件上使用 props 將其傳遞到子元件上。在 render 函式中,我們設定 name 和 site 來獲取父元件傳遞過來的資料。父元件的state 狀態 作為props引數 子元件的props 屬性 子元件根據props設定自...

React實戰 css元件化

2 全域性樣式 3 元件內樣式 npm install styled components dimport from styled components export const 自定義標籤名 createglobalstyle 全域性樣式 import from render import sty...

元件化和 React幾點問題

1.對元件化的理解 首先談，元件封裝 封裝資料 檢視 變化邏輯 其次說，元件復用 通過props傳值 2.jsx的本質 第一，jsx的語法。它以html標籤的形式存在，引入js變數和表示式，if語法，for迴圈，style樣式和classname，並且支援事件 第二，jsx語法根本無法被瀏覽器解析，...