具有 CSS 模块和 React 的多个类名

Question

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

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

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

import styles from './styles.css';

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

我遇到了麻烦 - 我尝试使用 类名 来获得对多个类的更多控制，但因为我需要最终结果是类名设置为 styles.sideMenu 和 styles.active （为了让 CSS 模块生效）我不确定如何处理这个问题。

非常感谢任何指导。

原文由 Toby 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 : '');

原文由 Chris 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在这里聚会有点晚了，但使用字符串模板对我有用——如果你愿意，你也可以将三元运算符移出到 const 中：

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

原文由 bertybro 发布，翻译遵循 CC BY-SA 4.0 许可协议