在一個(gè)元素上設(shè)置樣式，有一個(gè)固定的樣式，然后還有一個(gè)使用三元運(yùn)算符根據(jù)條件添加的樣式。

比如說有一個(gè)固定樣式"title":
<div className="title">標(biāo)題</div>，
然后還要一個(gè)點(diǎn)擊高亮的樣式:
<div className={index === this.state.active ? "active" : null}>標(biāo)題</div>
不能這樣寫：
<div className="title" className={index === this.state.active ? "active" : null}>標(biāo)題</div>

方法一：ES6 模板字符串 ``

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

方法二：join("")

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

方法三：classnames(需要下載classnames)

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>;
  }
});