组件接口说明

目前提供了3个基础组件, Component, PropTypes和View.

Component

为了保持组件的可控性, 所有自定义组件都需要继承于此Component, 而不是React.Component.

• 属性

• className [String], 可以将className附加到组件的根元素的class上.

• style [Object], 可以将style附加到组件的根元素的style上.

• 方法

• classNames(className, ..., className), 使用方法参照[1], 返回类型为String.

  <div className={this.classNames('el-alert', `el-alert--${ this.props.type }`)}>
   ...
  </div>

PropTypes

继承了React所有的PropTypes, 并提供了一些通用的自定义类型, 所有的自定义组件不再使用React.PropTypes.

• range(min, max)

View

• 属性

• if [any], Vue中的v-if的实现, 参考[2].

  // Vue
  <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
  
  // React
  <View if={this.props.showIcon}>
  <i className={this.classNames('el-alert__icon', TYPE_CLASSES_MAP[this.props.type] || 'el-icon-information', {'is-big': this.props.description})}></i>
  </View>

• show [any], Vue的v-show的实现, 参考[3].

  // Vue
  <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
  
  // React
  <View show={this.props.closable}>
  <i className={this.classNames('el-alert__closebtn', this.props.closeText ? 'is-customed' : 'el-icon-close')} onClick={this.close.bind(this)}>{this.props.closeText}</i>
  </View>

• transition [String], Vue的transition的实现, 参考[4].

  // Vue
  <transition name="el-alert-fade">
  ...
  </transition>
  
  // React
  <View transition="el-alert-fade">
  ...
  </View>

注意: React.Children.count(props.children) === 1

References

1. https://github.com/JedWatson/classnames
2. https://vuejs.org/guide/conditional.html#v-if
3. https://vuejs.org/guide/conditional.html#v-show
4. https://vuejs.org/guide/transitions.html#Transitioning-Single-Elements-Components