React 汉堡包菜单无法正常工作

Question

我需要帮助。单击时，我的响应式汉堡菜单不起作用。它应该显示导航链接，但它并没有这样做，它甚至在点击时都没有切换图标。当我删除此行“{open && NavLinks}”并将其保留为“NavLinks”时，导航链接显示但汉堡菜单是仍然无法正常工作。我怎样才能解决这个问题？ Mobile Navigation Image

import React, {useState} from 'react';
import NavLinks from './NavLinks';
import  './nav.css';
import {BiMenuAltRight} from 'react-icons/bi';
import {IoMdClose} from 'react-icons/io';

function MobileNavigation() {

    const [open, setOpen] = useState(false);

    const hamburgerIcon = <BiMenuAltRight className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/>;

    const closeIcon = <IoMdClose className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/>

    return (
        <nav className="MobileNavigation">
            {open ? closeIcon : hamburgerIcon}
            {open && <NavLinks />}
        </nav>
    );
}

export default MobileNavigation;

.nav-bar {
  height: 60px;
  width: 100%;
  top: 0;
  position: sticky;
  background-color: black;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
}

.nav-logo h1 {
  font-size: 23px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-family: "Earth-Obiter";
  background: linear-gradient(
    to right,
    #13c2e9,
    #3ab6ec,
    #5ca8e8,
    #799adf,
    #908bd0,
    #a480c7,
    #b873b9,
    #c866a6,
    #de5890,
    #ee4c73,
    #f4484f,
    #f05123
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
.nav-logo img {
  object-fit: contain;
  width: auto;
  height: 50px;
  padding-left: 30px;
}

.nav-items {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

.nav-items li {
  padding: 0 30px;
}

.nav-items li a {
  align-items: center;
  color: white;
}

.li-quote a {
  background-color: rgb(0, 209, 157);
  border-radius: 20px;
  padding: 7px 15px;
}

.li-quote a:hover {
  background-color: #f05123;
  transition: ease-in-out 0.5s;
}

.nav-li a:hover {
  background-color: white;
  color: black;
  padding: 7px 14px;
  border-radius: 20px;
  transition: ease-in 0.3s;
}

.MobileNavigation {
  display: none;
}

/* Media Queries */

@media only screen and (max-width: 768px) {
  .Navigation {
    display: none;
  }
  .MobileNavigation {
    display: grid;
    flex-direction: column;
    background: rgb(0, 30, 60);
    align-items: center;
  }
  .Hamburger {
    position: absolute;
    right: 5%;
    cursor: pointer;
  }
}

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

Answer 1

const hamburgerIcon = <BiMenuAltRight className="Hamburger" size='50px' color="white" onClick={() => setOpen(true)}/>;

const closeIcon = <IoMdClose className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/>

Answer 2

const [open, setOpen] = useState(false);

// This handler switches the bool open state, whatever value it currently has
const handleToggle = () => {
  setOpen(!open)
}

// Replace this...
const hamburgerIcon = <BiMenuAltRight className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/>; // You are setting the state to false
const closeIcon = <IoMdClose className="Hamburger" size='50px' color="white" onClick={() => setOpen(!true)}/> // You are setting the state to false

// ...with this
const hamburgerIcon = <BiMenuAltRight className="Hamburger" size='50px' color="white" onClick={handleToggle} />;
const closeIcon = <IoMdClose className="Hamburger" size='50px' color="white" onClick={handleToggle} />

React 汉堡包菜单无法正常工作

React Hamburger Menu unfunctional

javascript

css

reactjs

use-state

hamburger-menu