React汉堡包菜单无效

Question

我需要帮助。我的响应汉堡包菜单不工作时，点击。它应该显示导航链接，但它没有这样做，它甚至没有切换图标时点击。当我删除这一行">{打开&&NavLinks}";并保留为">NavLinks";导航链接显示出来了，但是汉堡包菜单仍然不起作用。我该如何解决这个问题?手机导航图片

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} />