Reactjs 如何使汉堡包图标菜单功能与React.js中的单击一起工作？

我一直在学习用Html、CSS和JS从Youtube制作响应导航栏的编码教程。
虽然我真的很想在react中再次制作，但以前我用纯Html、CSS和JS制作汉堡图标时，它的效果完美无瑕。（在移动视图中切换浏览器以查看汉堡图标）

但当我在react中复制所有代码时（如下所示）：

import React，{Component}来自“React”；
导入“/style/navbar.css”；
从“react router dom”导入{Link}；
类导航栏扩展组件{
render（）{
常量导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const nav=document.querySelector（“.nav links”）；
const navLinks=document.queryselectoral（“.nav links li”）；
burger.addEventListener（“单击”，（）=>{
导航类列表切换（“导航激活”）；
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+
0.5}s`；
}
});
burger.classList.toggle（“切换”）；
});
};
返回(
大学Facemash


家


关于


登录/注册


);
}
}
导出默认导航栏；

它工作得很好，但不是一键式的。相反，它确实需要双击才能正常工作

（在移动视图中切换浏览器以查看汉堡图标）

那么，为了使我的代码完美地工作，我应该做哪些更改呢

你的帮助对我来说真的很有价值
谢谢…

试着这样做：

class Navbar extends Component {
    const navslide = () => {
      const nav = document.querySelector(".nav-links");
      const navLinks = document.querySelectorAll(".nav-links li");
      nav.classList.toggle("nav-active");
      navLinks.forEach((link, index) => {
          if (link.style.animation) {
            link.style.animation = "";
          } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
          }
        });

        burger.classList.toggle("toggle");
      });
    };
  render() { 
    return (
      <div>
        <nav>
          <div className="logo">
            <h3>College Facemash</h3>
          </div>
          <ul className="nav-links">
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/login">Login / Signup</Link>
            </li>
          </ul>
          <div className="burger" onClick={() => navslide()}>
            <div className="line1"></div>
            <div className="line2"></div>
            <div className="line3"></div>
          </div>
        </nav>
      </div>
    );
  }
}

类导航栏扩展组件{
常量导航幻灯片=（）=>{
const nav=document.querySelector（“.nav links”）；
const navLinks=document.queryselectoral（“.nav links li”）；
导航类列表切换（“导航激活”）；
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+0.5}s`；
}
});
burger.classList.toggle（“切换”）；
});
};
render（）{
返回(
大学Facemash


家


关于


登录/注册


导航幻灯片（）}>
);
}
}

为什么要调用burger.addEventListener（“单击”），而您的函数将在burger click上运行！这就是为什么它需要2次点击才能运行

import React, { Component } from "react";
    import "./style/navbar.css";
    import { Link } from "react-router-dom";

    class navbar extends Component {
      render() {
        const navslide = () => {
          const burger = document.querySelector(".burger");
          const nav = document.querySelector(".nav-links");
          const navLinks = document.querySelectorAll(".nav-links li");
            nav.classList.toggle("nav-active");

            navLinks.forEach((link, index) => {
              if (link.style.animation) {
                link.style.animation = "";
              } else {
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 +
                  0.5}s`;
              }
            });

            burger.classList.toggle("toggle");
        };

        return (
          <div>
            <nav>
              <div className="logo">
                <h3>College Facemash</h3>
              </div>
              <ul className="nav-links">
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/login">Login / Signup</Link>
                </li>
              </ul>
              <div className="burger" onClick={navslide}>
                <div className="line1"></div>
                <div className="line2"></div>
                <div className="line3"></div>
              </div>
            </nav>
          </div>
        );
      }
    }

    export default navbar;

import React，{Component}来自“React”；
导入“/style/navbar.css”；
从“react router dom”导入{Link}；
类导航栏扩展组件{
render（）{
常量导航幻灯片=（）=>{
const burger=document.querySelector（“.burger”）；
const nav=document.querySelector（“.nav links”）；
const navLinks=document.queryselectoral（“.nav links li”）；
导航类列表切换（“导航激活”）；
navLinks.forEach（（链接，索引）=>{
if（link.style.animation）{
link.style.animation=“”；
}否则{
link.style.animation=`navLinkFade 0.5s轻松转发${index/7+
0.5}s`；
}
});
burger.classList.toggle（“切换”）；
};
返回(
大学Facemash


家


关于


登录/注册


);
}
}
导出默认导航栏；

此外，我还建议将状态添加到组件中，并在单击ham时对其进行更改！ 然后，您可以根据此状态更改元素类