React条件切换只工作一次

Question

在我正在工作的项目中，我试图使用React实现汉堡包菜单功能。我决定使用函数TurnToHamburger来切换布尔值(useHamburger)。这将改变导航栏的样式表，使其看起来像一个下拉菜单。问题是，它只会切换一次，之后导航条的外观根本不会改变。我怎么解决这个问题?

下面是相关的代码。

import {useState} from 'react'
const Navbar = ({img}) => {
const navbarinitial = {
listStyle: 'none',
display: 'flex',
justifyContent: 'space-around',
flexDirection:'row',
width: '30%',
color: 'var(--GrayishViolet)'
};
const navbarfinal = {
listStyle: 'none',
display: 'flex',
flexDirection:'column',
justifyContent: 'space-around',
width: '30%',
color: 'var(--GrayishViolet)',
backgroundColor:'red'
}
let useHamburger = false;
const [navbarstyle, setNavbarStyle] = useState(navbarinitial);

const TurnToHamburger=()=> {
if (!useHamburger) {
setNavbarStyle(navbarfinal)
useHamburger = true;
}
else {
setNavbarStyle(navbarinitial)
useHamburger = false;
}
}

Answer 1

在useState()中保持菜单(hamburger)的当前状态。状态应该是布尔式的——汉堡包是否打开。切换此状态以更改菜单。样式对象的选择应该来源于hamburger状态的当前值。

const { useState } = React;
const navbarinitial = {
listStyle: "none",
display: "flex",
justifyContent: "space-around",
flexDirection: "row",
width: "30%",
color: "var(--GrayishViolet)",
};
const navbarfinal = {
listStyle: "none",
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
width: "30%",
color: "var(--GrayishViolet)",
backgroundColor: "red",
};
const Navbar = () => {
const [hamburger, setHamburger] = useState(false);
const toggleHamburger = () => setHamburger((prev) => !prev);
return (
<nav>
<div className="nav-right">
<ul
className="nav-options"
style={hamburger ? navbarfinal : navbarinitial}
>
<li>Features</li>
<li>Pricing</li>
<li>Resources</li>
</ul>
<div className="navbar-buttons">
<button onClick={toggleHamburger}>Toggle Burger</button>
</div>
</div>
</nav>
);
};
ReactDOM.render(<Navbar />, root);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 2

为什么它不工作的原因是任何变量,不使用useState将重置每次组件呈现。这样做:

const [hamburger_open, setHamburgerOpen] = useState(false);
const TurnToHamburger=()=> {
if (!hamburger_open) {
setNavbarStyle(navbarfinal);
setHamburgerOpen(true);
} else {
setNavbarStyle(navbarinitial);
setHamburgerOpen(false);
}
}

Answer 3

const toggleHamburger = () =>setHamburger(!上一页);