将 CSS 和 HTML 汉堡菜单转换为 React 组件

Question

我正在学习使用 css、html 和 javascript 创建动画导航栏和汉堡包的教程，我想创建导航栏作为我项目的反应组件。

我试图隐藏的代码如下，它是一个 app.js 文件，它嵌入在带有标签的 html 中：

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');

    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');
    })
}

navSlide();

我已尝试将此代码实现到我的导航栏反应组件中，如下所示：

import React from "react";

const NavBar = () => {
const nav = document.querySelector(".nav-links");

  return (
    <div className="navbar">
        <nav>
            <ul className="nav-links">
                <li>
                    <a href="#">Menu Item</a>
                </li>
            </ul>
        <div
            className="burger"
            onClick={() => {
                nav.classList.toggle("nav-active");
            }}
        >
          <div className="line1" />
          <div className="line2" />
          <div className="line3" />
        </div>
       </nav>
    </div>
  );
};

export default NavBar;

但是，这会返回以下错误： "TypeError: 无法读取属性 'classList' of null"

.nav-active的CSS如下：

.nav-active {
  transform: translateX(0%);
}

我期望的结果是导航栏在单击汉堡符号时切换打开和关闭

Answer 1

最好的选择是使用状态。这应该有效，但尚未测试。需要 ReactJS 16.8 才能使 useState 挂钩工作。

import React, {useState} from "react";

const NavBar = () => {
  const [navOpened, setNavOpened] = useState(false);
  const navClassNames = navOpened ? 'nav-links nav-active' : 'nav-links';

  return (
    <div className="navbar">
        <nav>
            <ul className={navClassNames}>
                <li>
                    <a href="#">Menu Item</a>
                </li>
            </ul>
        <div
            className="burger"
            onClick={() => setNavOpened(!navOpened)}
        >
          <div className="line1" />
          <div className="line2" />
          <div className="line3" />
        </div>
       </nav>
    </div>
  );
};

Answer 2

要引用您应该使用 ref 的 DOM 元素，您可以使用 useRef 挂钩 docs。

import React, { useRef } from "react";

const NavBar = () => {

  const nav = useRef(null);  // initial value of ref null

  return (
    <div className="navbar">
        <nav>
            <ul className="nav-links" ref={nav}>  {/* Put the ref in your JSX */}
                <li>
                    <a href="#">Menu Item</a>
                </li>
            </ul>
        <div
            className="burger"
            onClick={() => {
                nav.current.classList.toggle("nav-active");  // Now you can use the ref here, current is required to get the current value of the ref
            }}
        >
          <div className="line1" />
          <div className="line2" />
          <div className="line3" />
        </div>
       </nav>
    </div>
  );
};

export default NavBar;