Categories

Friends

COLORFUL

React add-ons

React add-ons

React.addons 是编译react代码的工具方法集合，包含如下方法：

  • TransitionGroup，CSSTransitionGroup 处理动画
  • LinkedStaeMixin 双向绑定的helper改变state的值
  • cloneWithProps 浅复制props和动态改变props
  • createFragment 创建代码块集合
  • update 更新处理数组的helper类
  • PureRenderMixin
  • classSet 处理拼接className非常有用
  • TestUtils
  • Perf

使用方法

引入 react-eith-addons.js 或 require('react/addons')

classSet

// inside some `<Message />` React component
render: function() {
  var classString = 'message';
  if (this.props.isImportant) {
    classString += ' message-important';
  }
  if (this.props.isRead) {
    classString += ' message-read';
  }
  // 'message message-important message-read'
  return <div className={classString}>Great, I'll be there.</div>;
}

上面的处理方式比较冗长，使用classSet()方法处理如下：

render: function() {
  var cx = React.addons.classSet;
  var classes = cx({
    'message': true,
    'message-important': this.props.isImportant,
    'message-read': this.props.isRead
  });
  // same final string, but much cleaner
  return <div className={classes}>Great, I'll be there.</div>;
}

查看官网DOC

Written on September 11, 2015