react设置多个className
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>; }}); |
漫思
