Question

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

原始代码用HTML编写，带有一个单独的CSS样式文件和一个JavaScript文件，该JavaScript文件通过<script>标记链接到HTML代码。下面是我要转换为ReactJS的JavaScript文件的代码片段：

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();

我试图更改以适应上述代码片段的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

您应该能够映射@nestjs/microservices@6.5.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;
  }
}

如何将document.querySelectorAll（）转换为ReactJS？

1 个答案: