元件協同的兩種方法，1種是縱向的協同，就是元件巢狀，重點在於**的封裝，2種是橫向協同也就是mixin，元件抽離，重點在於**復用
1、元件巢狀，父元件通過屬性向子元件，子元件可以通過事件處理函式以委託的方式想父元件傳送資料
//選擇元件
22var
genderselect
=react.createclass(
>
27<
option value ="
0">
男<
/option>
28<
option value ="
1">
女<
/option>
29<
/select>;
30},
31});
3233
//表單元件
34var
signupform
=react.createclass(;
41},
42handlechange:
function
(name,event);
44newstate[name]
=event.target.value;
45this
.setstate(newstate);
46},
47handleselect:
function
(event));
49},
50render:
function
() ><
/input>
54<
input type ="
text
"placeholder ="
請輸入密碼
"onchange =
><
/input>
55<
genderselect type="
text
"handleselect
=><
/genderselect>
56<
/form>;
57},
58});
5960
react.render(
<
signupform
><
/signupform> ,document.body);
6162
script
>
63body
>
64html
>
2、mixin就是 橫向抽離相似的**
//mixin
22var
bindmixin =28
return
function
(event))
30//
因為key是作為'key'字串的存在傳入的
31newstate[key]
=event.target.value
32self.setstate(newstate)33}
34}35}
36var
textclass
=react.createclass(;
45},
46render:
function
() ><
/input>
49<
input type ="
text
"placeholder ="
請輸入密碼
"onchange =
><
/input>
50<
p>
<
/p>
51<
p>
<
/p>
52<
/div>;
53},
54});
5556
react.render(
<
textclass
><
/textclass> ,document.body);
5758
script
>
59body
>
60html
>
React元件協同使用
元件協同的本質是對元件的一種組織 管理方式。1.元件巢狀 2.mixin 混入，把一段 混到元件中 一 元件巢狀 本質是父子關係。父元件 屬性 子元件 子元件 事件處理函式 委託 父元件 優點 邏輯清晰 父子關係 模組化 同步開發 封裝細節 缺點 編寫難度高 處理父子關係 無法掌握細節 例項 如下 ...
react父子元件傳值 react元件通訊
react元件之間的通訊，其實就是通過乙個props建立彼此之間的橋梁，而我們最常用的就是父子傳值，子父傳值，以及兄弟之間傳值 1 父元件給子元件傳值 父元件給子元件傳值相對比較簡單，如果想讓他們倆之間有所聯絡，想傳遞父元件的資料，那麼我們就在父級元件中的子元件標籤上定義乙個屬性，而屬性的值就是我們...
React高階元件
想想以前用原生和jquery的專案，上千行的code映入眼簾，瞬間有種昏死過去的衝動。難以維護，改乙個bug可能出現n個bug，真的是很痛苦。於是乎元件化成為了當前前端開發的主流技術。angular vue和react很好的幫我們實現了元件化。但是我們常常也會遇到一種情況，就是兩個元件往往有很多的重...