具有CSS模块和React的多个classNames

Question

我正在使用以下代码根据来自props的布尔值在React组件中动态设置className:

<div className={this.props.menuOpen ? 'inactive' : 'active'}> ... </div>

但是,我也使用CSS模块,所以现在我需要将className设置为:

import styles from './styles.css';

<div className={styles.sideMenu}> ... </div>

我遇到了这个问题 - 我尝试使用类名来获得更多对多个类的控制,但是因为我需要最终结果是className被设置为两个styles.sideMenu AND styles.active(为了让CSS模块启动)我是不确定如何处理这个问题.

任何指导都非常感谢.

Answer 1

使用类名和es6:

let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen });

使用classnames和es5:

var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : '');

Answer 2

在这里参加聚会有点晚了，但是使用字符串模板对我有用 - 如果您愿意，也可以将三元运算符移出常量：

<div className={`${styles.sideMenu} ${this.props.menuOpen ? styles.inactive : styles.active}`>
...
</div>

Answer 3

我想添加一种更好的方式来使用npmbind的 api classnames。您可以将类名绑定到从 css 导入的样式对象，如下所示：

import classNames from 'classnames/bind';
import styles from './index.css';

let cx = classNames.bind(styles);

并像这样使用它：

cx("sideMenu", "active": isOpen)

其中 sideMenu 和 active 位于 styles 对象中。