react设置多个classNam

[react设置多个className - 明明一颗大白菜 - 博客园](https://www.cnblogs.com/mmykdbc/p/9505621.html)

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。

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

　　

 

分类: react