react设置多个className

li杰
  • 50

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

比如说有一个固定样式"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>

那多个样式,有字符串,有表达式,应该怎么写到一起?

评论
阅读 35.2k
5 个回答
✓ 已被采纳

ES6 模板字符串 ``

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


classnames
参照:classnames

可以这样:

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

或者用 classnames

我们都用classnames.eg:

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

参考classnames

我们用的ES6 模板字符串

<div className={index === this.state.active ? "active title" : 'title'}>标题</div>
宣传栏