我使用以下代码根据 props 中的 bool 值在 React 组件中动态设置 className:

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

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

import styles from './styles.css'; 
 
<div className={styles.sideMenu}> 
... 
</div> 

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

非常感谢任何指导。

请您参考如下方法:

使用classnames和 ES6:

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

使用类名和es5:

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