react组件动态处理className

[youngwind]

前言

在组件开发的时候我们常常会碰到类似这样的情况：满足某个特定条件的时候给某元素添加上一个类，否则不添加。之前一直用的方法是这样的：

render:function () {
  var demoClassName = "wrap";
  if (this.props.active) {
    demoClassName += " active";
  }
  return (
    <div className={demoClassName}></div>
  )
}

抛却局部css的概念不说，这样子写的代码好搓啊！肯定有更好的解决方案，后来我在这里找到了答案。大概的样子是这样的。

render: function() {
  var cx = React.addons.classSet;
  var demoClassName = cx({
    'wrap': true,
    'active': this.props.active,
  });
  // same final string, but much cleaner
  return <div className={demoClassName}></div>;
}

不过应该存在将局部css和这种动态加载类名结合起来的方法，以后有时间要研究一下。

[AnLuoRidge]

主流方案是用 classnames 这个库吧。