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

Question

我正试图删除添加到我的网站上的一个类。这个类("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

这是因为<Menu />组件是<nav>的子级。您可以做的是将handleToggle作为道具传递到<Menu>组件中。在<Menu>组件中，当用户单击链接时，触发handleToggle。让我知道它是否有帮助：(

Answer 2

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

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