如何转换此代码？ 香草 js 到 react.js

Question

这是代码
我想在反应中使用..如何转换？ 当我运行这段代码时，它失败了，我认为是因为querySelector ..

--- 我在回答后修改了这段代码并添加了 fontawesome 但我在网站上看不到导航栏我该怎么办？ 这段代码js、css连接有问题吗？ 我想知道为什么不能导入导航栏..

import React, { useState } from "react";
import "../css/Burger.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import { faArrowLeft  } from '@fortawesome/free-solid-svg-icons';

function Burger() {
  // create state to control the toggle state - so you can detect if nav is 
  //open or not
  const [navIsOpen, setNavIsOpen] = useState(false);

  //in this funciton we are toggeling true / false.
  const toggleNavHandler = () => {
    setNavIsOpen((prev) => !prev);
  };

  return (
    <div>
      <div
        className={`burger ${navIsOpen && "burger-open"}`}
        onClick={() => toggleNavHandler()}
      >
        <i><FontAwesomeIcon icon={faArrowRight} /></i>
        <i><FontAwesomeIcon icon={faArrowLeft} /></i>
      </div>

      <nav className={`navbar ${navIsOpen && "nav-open"}`}>
        <ul className="nav-links">
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Home</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Blog</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Gallery</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">About</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

export default Burger;

这是 burger.css

.navbar .nav-links li:nth-of-type(1), .navbar .nav-links li:nth-of-type(2), .navbar .nav-links li:nth-of-type(3), .navbar .nav-links li:nth-of-type(4), .navbar .nav-links li:nth-of-type(5) {
     opacity: 0;
     transition: 0.3s ease-in all;
}
 .navbar .nav-links li:nth-of-type(1).nav-link-open, .navbar .nav-links li:nth-of-type(2).nav-link-open, .navbar .nav-links li:nth-of-type(3).nav-link-open, .navbar .nav-links li:nth-of-type(4).nav-link-open, .navbar .nav-links li:nth-of-type(5).nav-link-open {
     opacity: 1;
     transform: translateY(10px);
}
 .navbar .nav-links li a::before, .navbar .nav-links li a::after {
     position: absolute;
     content: '';
     height: 4px;
     width: 0%;
     background-color: #2a3255;
     left: 0;
     border-radius: 2px;
     transition: 0.3s ease all;
}

 .burger {
     position: absolute;
     top: 25px;
     right: 25px;
     color: #23f0ff;
     cursor: pointer;
     z-index: 1;
     display: flex;
}
 .burger i:nth-of-type(1) {
     display: block;
}
 .burger i:nth-of-type(2) {
     display: none;
}
 .burger.burger-open {
     color: #2a3255;
}
 .burger.burger-open i:nth-of-type(1) {
     display: none;
}
 .burger.burger-open i:nth-of-type(2) {
     display: block;
}
 .navbar {
     position: absolute;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     background-color: #23f0ff;
     clip-path: circle(0px at 0 0px);
     transition: 0.5s ease all;
}
 .navbar .nav-links {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .navbar .nav-links li {
     list-style-type: none;
     margin: 3rem 0;
}
 .navbar .nav-links li:nth-of-type(1).nav-link-open {
     transition-delay: 0.25s;
}
 .navbar .nav-links li:nth-of-type(2).nav-link-open {
     transition-delay: 0.35s;
}
 .navbar .nav-links li:nth-of-type(3).nav-link-open {
     transition-delay: 0.45s;
}
 .navbar .nav-links li:nth-of-type(4).nav-link-open {
     transition-delay: 0.55s;
}
 .navbar .nav-links li:nth-of-type(5).nav-link-open {
     transition-delay: 0.65s;
}
 .navbar .nav-links li a {
     text-decoration: none;
     color: #2a3255;
     font-size: 2.4rem;
     position: relative;
     text-transform: uppercase;
     letter-spacing: 1px;
}
 .navbar .nav-links li a::before {
     top: -2px;
}
 .navbar .nav-links li a::after {
     bottom: -5px;
}
 .navbar .nav-links li a:hover::before {
     width: 100%;
}
 .navbar .nav-links li a:hover::after {
     width: 100%;
}
 .navbar.nav-open {
     display: block;
     clip-path: circle(100%);
}
 

Answer 1

这样的事情应该做的工作：

import React, {useState} from 'react';
import '../css/Burger.css';

function Burger() {

  const [isOpen, setIsOpen] = useState(false)
    
  const handleClick = () => {
      setIsOpen(prevState => !prevState)
  }
    

  return (
    <div>
      <div className={"burger"+ isOpen ? "burger-open" : ""} onClick={handleClick}>
        <i className="fas fa-bars fa-2x"></i>
        <i className="fas fa-times fa-2x"></i>
      </div>

      <nav className={"navbar" + isOpen ? "nav-open" : ""}>
        <ul className="nav-links">
          <li className="nav-link">
            <a href="#">Home</a>
          </li>
          <li className={"nav-link" + isOpen ? "nav-link-open" : ""}>
            <a href="#">Blog</a>
          </li>
          <li className={"nav-link" + isOpen ? "nav-link-open" : ""}>
            <a href="#">Gallery</a>
          </li>
          <li className={"nav-link" + isOpen ? "nav-link-open" : ""}>
            <a href="#">About</a>
          </li>
          <li className={"nav-link" + isOpen ? "nav-link-open" : ""}>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

export default Burger;

Answer 2

我在这里做了什么来使香草 js 成为 React。

首先 - 您需要将class更改为className 。

第二 - 创建一个状态（使用 useState 挂钩）来检测变化

第三 - 在您想要的元素（在本例中为汉堡）上创建点击事件并创建句柄。 在处理程序内部，您可以使用prev看到 im 在 true 和 false 之间切换（切换）。 setState 默认将前一个状态作为参数。 我们用它来切换它!

第四 - 插入每个元素的类（className）检测器以检查导航是否打开。 我使用&&运算符，如果导航打开，它将添加类，如果没有，则不会显示类。

如果您需要更多解释或工作示例，请告诉我...

---

更新代码：

import React, { useState } from "react";
import "./css/burger.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";

function Burger() {
  // create state for each component that you want to control
  const [navIsOpen, setNavIsOpen] = useState(false);

  //in this funciton we are toggeling true / false in each state.
  const toggleNavHandler = () => {
    setNavIsOpen((prev) => !prev);
  };

  return (
    <div>
      <div className="burger" onClick={() => toggleNavHandler()}>
        {navIsOpen ? (
          <FontAwesomeIcon icon={faTimes} />
        ) : (
          <FontAwesomeIcon icon={faBars} />
        )}
      </div>

      <nav className={`navbar ${navIsOpen && "nav-open"}`}>
        <ul className="nav-links">
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Home</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Blog</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Gallery</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">About</a>
          </li>
          <li className={`nav-link ${navIsOpen && "nav-link-open"}`}>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </div>
  );
}

export default Burger;

---

编辑：要使 font-awesome 能够处理您的代码，您需要安装 3 个软件包：

npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

只需将其复制并粘贴到终端中即可。 它将安装：

@fortawesome/fontawesome-svg-core
@fortawesome/free-solid-svg-icons
@fortawesome/react-fontawesome

安装这 3 个后，您需要导入 react-fontawesome 并导入要使用的图标：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars, faTimes } from "@fortawesome/free-solid-svg-icons";

要使用您需要使用FontAwesomeIcon的图标：

<FontAwesomeIcon icon={faTimes} />

工作示例 - 代码框

如果您觉得此答案有帮助，请将其标记为答案。