Question

我正在尝试以一种我能理解的方式在 ReactJS 中编写一个切换菜单。我知道我的代码是新手，我需要一些帮助来了解我在这里做错了什么，我被困在这里将近 12 个小时。

使用函数 display()，我正在尝试向导航添加一个新的 className，因此将是“topnav 响应式”，因此通过这种方式，我可以激活 @media CSS 中的新样式以制作响应式菜单.

function Menu() {
  const [showMenu, setMenu] = useState();

  function display() {
    const setMenu = () => {
      let toggle = document.querySelector(".topnav");
      if (toggle.className === "topnav") {
        toggle.className += " responsive";
      } else {
        toggle.className = "topnav";
      }
    };
  }

  return (
    <header>
      <div className="container container-nav">
        <div
          onClick={() => {
            display();
          }}
          className="logo"
        >
          <img src={logo} alt="" />
        </div>
        <nav className="topnav">
          <ul>
            <li className="icon">
              <img src={burgerMenu} alt="" />
            </li>
            <li>
              <a href="">Home</a>
            </li>
            <li>
              <a href="">About</a>
            </li>
            <li>
              <a href="">Projects</a>
            </li>
            <li>
              <a href="">Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

** CSS **


@media (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Answer 1

我想也许你正在尝试做这样的事情？

import { useState } from 'react';

function Menu() {
  const [showMenu, setMenu] = useState();

  function display() {
    setMenu(value=>!value)
  }

  return (
    <header>
      <div className='container container-nav'>
        <div
          onClick={display}
          className='logo'
        >
          <img src={logo} alt='' />
        </div>
        <nav className={`topnav${showMenu?' responsive':null}`}>
          <ul>
            <li className='icon'>
              <img src={burgerMenu} alt='' />
            </li>
            <li>
              <a href=''>Home</a>
            </li>
            <li>
              <a href=''>About</a>
            </li>
            <li>
              <a href=''>Projects</a>
            </li>
            <li>
              <a href=''>Contact</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  );
}

经验法则是，在使用 React 时，您应该在大多数情况下避免使用 DOM API。如果您正在执行类似 document.querySelector(x) 的操作，您可能实际上想要使用 Ref (https://reactjs.org/docs/refs-and-the-dom.html)。

然而，这一次，一个简单的条件就足够了。

ReactJS 切换汉堡菜单

1 个答案: