En el proyecto en el que estoy trabajando, estoy tratando de implementar una funcionalidad de menú de hamburguesa usando React. Decidí alternar un booleano (useHamburger) usando la función TurnToHamburger. Estos cambiarían la hoja de estilo de la barra de navegación para que pareciera un menú desplegable. El problema es que solo cambiaría una vez y luego la apariencia de la barra de navegación no cambiaría en absoluto. ¿Cómo puedo solucionar esto?
A continuación se muestra el código correspondiente.
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; } }En useState() mantenga el estado actual del menú ( hamburger ). El estado debe ser un valor booleano: hamburguesa abierta o no. Alterne este estado para cambiar el menú. La selección del objeto de estilo debe derivarse del valor actual del estado de 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>La razón por la que no funciona es porque cualquier variable que no use useState se reiniciará cada vez que se renderice el componente. Haz esto en su lugar:
const [hamburger_open, setHamburgerOpen] = useState(false); const TurnToHamburger=()=> { if (!hamburger_open) { setNavbarStyle(navbarfinal); setHamburgerOpen(true); } else { setNavbarStyle(navbarinitial); setHamburgerOpen(false); } }const toggleHamburger = () => setHamburger(!prev);