页面加载时如何在 ReactJS 中删除 className？

Question

我正在尝试删除添加到我的网站的 class。 class（“showmenu”）是在我单击“汉堡包图标”以显示隐藏菜单时添加的。当我点击一个新页面时，移动菜单仍然打开，因为 class“showmenu”。有人可以帮我解决吗？

import { useState } from "react";

const Navbar = () => {
  const [isActive, setActive] = useState(false);
  const handleToggle = (event) => {
    setActive(!isActive);
  };

  return (
    <header>
      <a className="toggle-nav" id="icons" onClick={handleToggle}>
        &#9776;
      </a>
      <nav id="nav-menu" className={`hidden${isActive ? " showmenu" : ""}`}>
        <Menu />
      </nav>
    </header>
  );
};
export default Navbar;

Answer 1

我想有一些 CSS 问题。另一种方法是在您想要隐藏 DOM 元素时完全删除它，如下所示。

{isActive && (
  <nav id="nav-menu" className={`hidden${isActive ? " showmenu" : ""}`}>
    <Menu />
  </nav>
)}

Answer 2

这是因为 <Menu /> 组件是 <nav> 的子组件。您可以做的是将 handleToggle 作为道具传递给 <Menu> 组件。在 <Menu> 组件内，当用户点击 link 时，触发 handleToggle。让我知道它是否有帮助:)

页面加载时如何在 ReactJS 中删除 className？

How to remove className in ReactJS when page load?

mobile

jquery

navbar

reactjs