Semantic-UI官方React组件化已基本完成，官网：http://react.semantic-ui.com/近期开通。从官网来看，基础组件基本齐全，还有几个Addons也在进行中。基本元素组件Semantic-UI中的基本元素是纯CSS类定义的组件，不需要js操作，所以实现起来比较简单。有了前面基础类UiElement和辅助类PropsHelper的实现，就很容易实现一个基础元素组件了。以Button组件为例。按钮组件可以单独存在，也可以作为组组件存在。另外，Button组件还允许简单的Animation存在，即一对显示/隐藏的组件，可以随鼠标状态切换。外部调用的一般形式为：Key1Key2键3显示内容键3隐藏内容调用方法其实是很直观的。属性作为props传入Button组件，事件系统的回调方法与普通方法没有区别。比较复杂的处理是将所有组件的公共属性组织起来，定义它们的类型和取值范围。ButtonButton作为一个基础组件，有很多常用的属性。这些属性的命名基本上参考了Semantic-UI原有的CSS类名，由Button.js中的常量PROP_TYPES定义。constPROP_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方法声明的。classButtonextendsUiElement{//类型定义staticpropTypes={...PropsHelper.createPropTypes(PROP_TYPES)};render(){//生成元素styletstyle=this.createElementStyle(this.props,PROP_TYPES,'button');返回({this.props.children}
);}}按钮。Group类似于Button组件，Group组件也继承自UiElement生成与其声明的公共属性对应的CSS类。//属性定义constGROUP_PROP_TYPES=['iconed','vertical','labeled','equalWidth','color',];/***键组组件*/classGroupextendsUiElement{//类型定义staticpropTypes={...PropsHelper.createPropTypes(GROUP_PROP_TYPES)};/***获取渲染内容*/render(){//生成元素Styletstyle=this.createElementStyle(this.props,PROP_TYPES,'buttons');return(
