React - 想要在汉堡包下拉组件的子元素上切换活动类

Question

我正在制作一个定制的3行汉堡包下拉组件。为了解决我的问题：我想在子组件上切换一个活动类 - 即3个跨越组成3行，在一个包装范围内：

<span id="closebtn">
  <span class="line1" />
  <span class="line2" />
  <span class="line3" />
</span>

而且我不太清楚如何。

我以前工作过但是混合了React和jQuery（我知道，我知道）。使用jQuery代码看起来像这样：

$(document).ready(function() {
  let close = document.getElementById("closebtn");

  close.addEventListener("click", function() {
    let menuIcon = close.children;
    for (let i = 0; i < menuIcon.length; i++) {
      menuIcon[i].classList.toggle("active");
    }
  });

我正在将我的项目转换为纯React并尝试使用相同的效果 - 即，当您单击下拉列表时，它会切换所有三个子组件上的活动类，并将3行转换为X.以下是代码：

class NavButton extends Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };

    this.toggleButton = this.toggleButton.bind(this);
  }

  toggleButton() {
    // ...do something...

    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    let children = this.props.children;

    return (
      <span id="closebtn" onClick={this.toggleButton}>
        {children}
      </span>
    );
  }
}

按钮现在设置如下：

  <NavButton>
    <span className="line1" />
    <span className="line2" />
    <span className="line3" />
  </NavButton>

我想我可能需要制作一个额外的组件，比如NavButtonLine可以代替三个内部空间，然后玩这些组件的状态，但我不太清楚如何去做。

任何见解将不胜感激！

Answer 1

解决这个问题的一种方法是

import cx from 'classnames';

class NavButton extends Component {
  constructor(props) {
    super(props);

    this.state = { isOpen: false };

    this.toggleButton = this.toggleButton.bind(this);
  }

  toggleButton() {
    // ...do something...

    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    let children = this.props.children;
    const activeClass = classnames({
      active: this.state.isOpen,
    });

    return (
      <span id="closebtn" onClick={this.toggleButton}>
        <span className="line1" className={activeClass} />
        <span className="line2" className={activeClass} />
        <span className="line3" className={activeClass} />
      </span>
    );
  }
}

为了使其更具可扩展性，您可以将子项和active循环到它们。参考：https://reactjs.org/docs/react-api.html#reactchildren