react设置多个className
在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。
| 1 2 3 4 5 6 |
比如说有一个固定样式"title":
<div className="title">标题</div>，
然后还要一个点击高亮的样式:
<div className={index === this.state.active ? "active" : null}>标题</div>
不能这样写：
<div className="title" className={index === this.state.active ? "active" : null}>标题</div>
|
方法一：ES6 模板字符串 ``
| 1 |
className={`title ${index === this.state.active ? 'active' : ''}`}
|
方法二：join("")
| 1 |
className={["title", index === this.state.active?"active":null].join(' ')}
|
方法三：classnames(需要下载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>;
}
});
|