如果我使用 CSS 模块，如何在反应中添加另一个类名？

Question

我有带汉堡的导航栏，如果单击汉堡，我想添加 class NavLinksActive 。 现在，我有这个： <ul className={styles.NavLinks}> 。

我该如何使用：

this.state = {
            showMenu: false

如果我点击汉堡添加新的类名？

Answer 1

您可以使用 NPM类名 package 有条件地向组件添加类。

示例：

var classNames = require('classnames');

var Button = React.createClass({
  // ...
  render () {
    var btnClass = classNames({
      btn: true, // this class will always be applied
      'btn-show-menu': this.state.showMenu // conditionally add css
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

注意：如果没有 package，您可以执行以下操作：

var Button = React.createClass({
  // ...
  render () {
    var btnClass = 'btn';
    if (this.state.showMenu) btnClass += ' btn-show-menu';
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

---

编辑

澄清注释的事件处理示例： https://codesandbox.io/s/proud-bird-4jms3