react基礎學習

最簡單的 父 —> 子 傳值

// 父元件通過在子元件標籤上設定屬性傳遞資料

teachername=
/>
teachername=
/>
// 子元件通過this.props獲取父元件傳遞的資料
// this.props.teachername 獲取老師的名稱
render()
,我的老師是
, 我對老師很
>
滿意<
/button>
<
/p>
<
/>
)}

// 父元件通過在子元件標籤上設定屬性傳遞資料

say =
/>
say =
/>
// 子元件通過this.props獲取父元件傳遞的資料
// this.props.say 獲取父元件提供的方法，通過呼叫父元件的方法，將傳遞的資料作為引數傳入，當父元件的方法被呼叫，就通過獲取當前方法引數的方式，得到了子元件傳遞的資料
render()
, 我對老師很
>
滿意<
/button>
<
/p>
<
/>
)}

核心思路：找到共同的父元件，同時使用父元件傳遞的值和方法

過程有些複雜，這裡省略了

teacher.js

import react,

from
"react"
// 匯入 boy（男孩） 和 girl（女孩） 元件
import boy from
"./boy"
import girl from
"./girl"
export
default
class
teacher
extends
component
this
.stusay =
this
.stusay.
bind
(this);
this
.boysaysecret =
this
.boysaysecret.
bind
(this);
this
.grilsaysecret =
this
.grilsaysecret.
bind
(this);
}render()
return
(<
>
我是老師<
/p>
對我很<
/p>):
" "}
<
/div>
say =
teachername=
boysaysecret =
girlsaycontent =
/>
say =
teachername=
grilsaysecret =
boysaycontent =
/>
<
/>)}
stusay
(stuname,stusaycontent)})
}boysaysecret
(constent)})
}grilsaysecret
(constent)})
}}

import react,

from
"react"
export
default
class
boyextends
component
}render()
,我的老師是
, 我對老師很
>
滿意<
/button>
, 我想對女孩說：>悄悄話<
/button>，
她對我說：
<
/p>
<
/>)}
}

import react,

from
"react"
export
default
class
boyextends
component
}render()
，我的老師是
, 我對老師很
>
不滿意<
/button>
, 我想對男孩說：>悄悄話<
/button>，
他對我說：
<
/p>
<
/>)}
}

react 基礎學習

npm start 啟動專案 class clock extends react.component componentdidmount componentwillunmount render 把元件裝進 root reactdom.render document.getelementbyid ro...

react封裝函式 React 基礎學習筆記

內容 intro install page setup react elements reactdom react component react factories names abstract react.createelement reactdom.render react.component...

react 學習基礎知識

三種改變this指向的方法 1.在呼叫的時候使用bind方法 onclick 2.在constructor裡面改變this指向 this.getdata this.getdata.bind this 3.在方法上使用箭頭函式 getdata 兩種雙向繫結的方法 1.根據當前的元素自身的value值 ...