元件協同的本質是對元件的一種組織、管理方式。
1.元件巢狀
2.mixin(混入，把一段**混到元件中)
一、元件巢狀
本質是父子關係。
父元件 —（屬性）—子元件
子元件—（事件處理函式（委託））—父元件
優點：邏輯清晰：父子關係
**模組化：同步開發
封裝細節
缺點：編寫難度高：處理父子關係
無法掌握細節
例項**如下：
html>
<
htmllang="zh-cn">
<
head>
<
metacharset="utf-8">
<
title>父子關係
title>
head>
<
body>
<
scriptsrc="./build/react.js">
script>
<
scriptsrc="./build/jsxtransformer.js">
script>
<
scripttype="text/jsx">
vargenderselect=react.createclass(>
<
optionvalue="0">男
option>
<
optionvalue="1">女
option>
select>}})
varsignupform=react.createclass(
},handlechange:function(name, event)
newstate[name] = event.target.valuethis.setstate(newstate)
},handleselect:function(event) )
},render:function() />
<
inputtype="password"placeholder="請輸入密碼"onchange=/>
<
genderselecthandleselect=>
genderselect>
form>}})
react.render(<
signupform>
signupform>, document.body);
script>
body>
html>
二、mixin編寫和使用
mixin=一組方法
mixin的目的是橫向抽離出元件的相似**
相似概念：面向切面程式設計、外掛程式
優點：**復用
即插即用
適應性強
缺點：編寫難度高
降低**可讀性
**如下：
html>
<
htmllang="zh-cn">
<
head>
<
metacharset="utf-8">
<
title>mixin
title>
head>
<
body>
<
scriptsrc="./build/react.js">
script>
<
scriptsrc="./build/jsxtransformer.js">
script>
<
scripttype="text/jsx">
/*var bindingexample = react.createclass(
},handlechange:function (event) );
},render:function ()
}});*/
varbindingmixin= ;
newstate[key] =event.target.value;
that.setstate(newstate);}},
};varbindingexample=react.createclass(
},render:function() />
<
textareaonchange=>
textarea>
<
p>
p>
<
p>
p>
div>
}});
react.render(
<
bindingexample>
bindingexample>,document.body);
script>
body>
html>
React 元件協同關係
元件協同的兩種方法，1種是縱向的協同，就是元件巢狀，重點在於 的封裝，2種是橫向協同也就是mixin，元件抽離，重點在於 復用 1 元件巢狀，父元件通過屬性向子元件，子元件可以通過事件處理函式以委託的方式想父元件傳送資料 選擇元件 22var genderselect react.createcla...
09 React 建立元件 使用元件
建立好乙個react應用程式後，我們就需要建立元件並且使用元件，其實react開發本身就是建立元件 使用元件的過程。下面來看一下示例 上圖中的html頁面上總共有三個元件 根元件 home元件和列表元件，下面就具體聊聊該怎麼建立這些元件以及如何使用它們。建立元件 1 我們修改一下預設建立的react...
React中使用Antd元件
antd的高階配置 antd的自定義主題 在react專案中進行安裝yarn add antd或者npm i antd安裝 import react,from react import from antd 引入按鈕 import antd dist antd.css 還需要引入css樣式 目的是不用...