如何将 document.querySelectorAll() 转换为 ReactJS？

Question

我正在尝试将纯 JavaScript、CSS 和 HTML 动画导航栏转换为 ReactJS 组件以在项目中使用。

原始代码是用 HTML 编写的，带有一个单独的 CSS 样式文件，以及一个通过 <script> 标签链接到 HTML 代码的 JavaScript 文件。下面是我试图转换为 ReactJS 的 JavaScript 文件的代码 sn-p：

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

    burger.addEventListener('click', ()=> {

    navLinks.forEach((link, index) => {
        if (link.style.animation) {
            link.style.animation = '';
        } else {
            link.style.animation = 'navLinkFade 0.5s ease forwards $(index / 7 + 1}s
        }
    });
}
navSlide();

我正在尝试更改以适应上述代码 sn-p 的 ReactJS 组件当前包含以下代码：

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>
        <div className="logo">
          <h4>Reuben McQueen</h4>
        </div>
        <ul className={navClassNames}>
          <li>
            <a href="#">Projects</a>
          </li>
          <li>
            {" "}
            <a href="#">Experiments</a>
          </li>
          <li>
            {" "}
            <a href="#">Skills</a>
          </li>
          <li>
            {" "}
            <a href="#">Contact Me</a>
          </li>
        </ul>
        <div className="burger" onClick={() => setNavOpened(!navOpened)}>
          <div className="line1" />
          <div className="line2" />
          <div className="line3" />
        </div>
      </nav>
    </div>
  );
};

export default NavBar;

.nav-links li 的 CSS 如下：

.nav-links li {
    list-style: none;
}

在给定时间延迟后，代码应该在每个列表项中单独移动。

Answer 1

您应该能够映射您的 navlinks 并根据抽屉状态对其应用样式（或缺少样式）。我相信，这样的东西模拟了您所追求的东西..

编辑：我将答案更新为更有效的方法...

原始答案：

const NavBar = () => {
  const [navOpened, setNavOpened] = React.useState(false);
  const navLinks = ["One", "Two", "Three"];
  const handleBurgerClick = () => {
    setNavOpened(!navOpened);
  }
  
  return (
    <div>
      <div onClick={handleBurgerClick} className="burger">BURGER {navOpened ? "(close " : "(open "}me)</div>
      <ul className="nav-links">
        {navOpened
          ? navLinks.map((nl, index) => {
              return (
                <li
                  style={{
                    animation: `navLinkFade 0.5s ease forwards ${index / 7 + 0.1}s`
                  }}
                >
                  Link {nl}
                </li>
              );
            })
          : ""}
      </ul>
    </div>
  );
};

ReactDOM.render(<NavBar />, document.body);

.burger {
  cursor: pointer;
  text-align: center;
  width: 80px;
}

.burger:hover {
  color: blue;
}

.nav-links li {
  list-style: none;
  opacity: 0;
}

@keyframes navLinkFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

更高级的答案（让您淡入淡出）

const NavBar = ({ navLinks = [] }) => {
  const [navOpened, setNavOpened] = React.useState(false);
  const [styles, setStyles] = React.useState({ opacity: 0 });
  
  const handleBurgerClick = () => {
    setStyles(
      navOpened ? { name: 'navLinkFadeOut' } : { opacity: 0, name: 'navLinkFadeIn' }
    );
    setNavOpened(!navOpened);
  }
  
  const oppositeIndex = (arr, index) => arr.indexOf([...arr].reverse()[index]);
  
  const getDelay = index => (navOpened ? index : oppositeIndex(navLinks, index)) / 7 + 0.1;
  
  const getStyle = index => {
    return styles.name ? {
      ...styles, 
      animation: `${styles.name} 0.5s ease forwards ${getDelay(index)}s` 
    } : styles;
  }
  
  return (
    <div>
      <button onClick={handleBurgerClick} className="burger">
        BURGER {navOpened ? "(close " : "(open "}me)
      </button>
      <ul className='nav-links'>
        {navLinks.map((e, i) => <li style={getStyle(i)}>{e}</li>)}
      </ul>
    </div>
  );
};

ReactDOM.render(
  <NavBar navLinks={["One", "Two", "Three"]} />, 
  document.body
);

.burger {
  cursor: pointer;
  text-align: center;
  width: 140px;
  height: 25px;
}

.burger:hover {
  color: blue;
}

.nav-links li {
  list-style: none;
}

@keyframes navLinkFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes navLinkFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>