首先单击导航菜单按钮给出错误并在 ReactJs 之后工作正常

Question

我正在尝试在 ReactJS 中制作一个 hide/show 导航栏。但是在第一次点击时我收到了这个错误并且在第一次点击后它工作正常。

注意：是两次，我不知道为什么

这是我的代码，它只有在

时才有效（在第一次错误之后）

setMenu(!menu);

早于

nav.classList.toggle("nav-open");

否则错误会不断出现。

export default function Navbar() {
  const [menu, setMenu] = useState(true);
  const nav = document.querySelector("nav");

  const openNav = () => {
    setMenu(!menu);
    nav.classList.toggle("nav-open");
  };

  return (
    <nav id="nav-wrapper">
      <header className="nav-header">
        <div
          className="arrow-btn"
          onClick={() => {
            openNav();
          }}
        >
          {menu ? (
            <Icon.HiChevronDoubleLeft size={20} className="arrows" />
          ) : (
            <Icon.HiChevronDoubleRight size={20} className="arrows" />
          )}
        </div>
        <img src={Profiledp} alt="." />
        <p className="name">Naman Pokhriyal</p>
      </header>
  </nav>

Answer 1

这首先不是在 React 中执行此操作的正确方法。您已经使用 menu 状态值来确定菜单是否打开，那么为什么不继续使用 menu 状态值来确定菜单是否打开？像这样：

const openNav = () => {
    setMenu(!menu);
};

return (
  <nav id="nav-wrapper" className={menu ? "nav-open" : ""}>
  // etc.
);

基本上任何时候你试图在 React 中直接操作 DOM 时，退后一步并尝试找到一种通过状态来管理它的方法。在 React 中直接 DOM 操作几乎总是会导致错误，除非你真的知道你在框架的幕后做了什么。

首先单击导航菜单按钮给出错误并在 ReactJs 之后工作正常

First click on Nav Menu Button Giving Error and working fine after that ReactJs

html

javascript

navigation

function

reactjs