工作中经常会碰到需要给jsx中加多个classname.

es6模板字符串方法

1
className={`title ${index === this.state.active ? 'active' : ''}`}

字符串连接

1
className={["title", index === this.state.active?"active":null].join(' ')}

classnames

1
2
3
4
5
6
7
8
9
10
11
12
13
var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});