semantic-ui官方的react元件化已經快要接近完成了，最近開放了官網:http://react.semantic-ui.com/。從官網看，基本元件已經基本完備，還有幾個addon也在進行中。
基本元素元件
semantic-ui中的基本元素均為純css類定義的元件，沒有js的操作，是以實作起來比較簡單。有了前面基礎類uielement和輔助類propshelper的實作，要實作一個基本元素元件非常輕松。
以button元件舉例。button元件可以單獨存在，也可以作為組元件使用。另外button元件也允許簡單的animation存在，即一對顯示/隐藏的元件可以随滑鼠狀态而切換。外部調用的大緻形式為：
<button.group size='small'>
<button primary onclick={this.handleclickbtn1}>按鍵1</button>
<button color='blue' onclick={this.handleclickbtn2}>按鍵2</button>
<button animated onclick={this.handleclickbtn3}>
<button.content visible>按鍵3顯示内容</button>
<button.content hidden>按鍵3隐藏内容</button>
</button>
</button.group>
調用方式實際上是很直覺的，屬性均作為props傳入到button元件中，事件系統的回調方法也與普通方式并無二緻。相對複雜的處理，是要整理所有元件的共通屬性，定義它們的類型和取值範圍。
button
button作為基本元件，有非常多常用的屬性。這些屬性在命名上，基本參照semantic-ui的原有css類名，在button.js中用常量prop_types來定義。
const prop_types = [
'primary', 'secondary', 'animated', 'labeled', 'basic', 'inverted', 'color',
'size', 'fluid', 'active', 'disabled', 'loading', 'compact', 'circular', 'positive',
'negative', 'floated', 'attached', 'iconed', 'dropdown'
];
元件根據propshelper的相關方法來生成proptypes定義，并且通過父類(uielement)的createelementstyle方法來編輯群組裝所使用的css類。另外，還通過父類的geteventcallback方法，來聲明相關的事件系統回調處理。
class button extends uielement {
// 類型定義
static proptypes = {
...propshelper.createproptypes(prop_types)
};
render() {
// 生成元素style
let style = this.createelementstyle(this.props, prop_types, 'button');
return (
<div id={this.props.id} classname={style} {...this.geteventcallback()} tabindex='0'>
{this.props.children}
</div>
);
}
}
button.group
與button元件類似，group元件也繼承于uielement以生成其聲明的公有屬性對應的css類。
// 屬性定義
const group_prop_types = [
'iconed', 'vertical', 'labeled', 'equalwidth', 'color',
/**
* 按鍵組元件
*/
class group extends uielement {
...propshelper.createproptypes(group_prop_types)
/**
* 取得渲染内容
*/
let style = this.createelementstyle(this.props, prop_types, 'buttons');
<div id={this.props.id} classname={style} {...this.geteventcallback()}>
button.content
content元件的實作更簡單，直接貼代碼。
class content extends react.component {
visible: react.proptypes.bool
<div classname={this.props.visible ? 'visible content' : 'hidden content'}>
)
其他元件
通過以上示例可以看出，有了uielement和propshelper類的處理，基本元素元件的實作是非常簡單的。隻需聲明元件所使用的屬性，并使用父類方法編輯群組裝css類即可。其他元件如label，icon，image，grid等，均沿同一思路封裝即可完成。
難點是什麼?
在封裝基本元素元件的過程中，我感覺難點在于：
封裝和抽象元素的共通處理(目前已基本成型)
管理衆多元件的共通屬性(目前還在摸索中)
看過官方相關處理的源碼，感覺思路還是大體一緻的，這點讓我感覺多了一些自信(๑•̀ㅂ•́)و
作者：sheva
來源：51cto