在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react設置多個className

react設置多個className

在一個元素上設置樣式，有一個固定的樣式，然后還有一個使用三元運算符根據條件添加的樣式。

比如說有一個固定樣式"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 模板字符串 ``

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

或
classnames
參照：classnames

2018年7月28日 14:01
編輯回答
安若晴

可以這樣：

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

或者用 classnames

2017年8月21日 19:36
編輯回答
笑忘初

我們用的ES6 模板字符串

2017年10月24日 23:48
編輯回答
生性

我們都用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

2017年6月23日 02:57
編輯回答
糖豆豆
<div className={index === this.state.active ? "active title" : 'title'}>標題</div>
2018年4月3日 20:17