0
111
VistasPrimero haga clic en el botón de menú de navegación que da error y funciona bien después de eso ReactJs
Estoy tratando de hacer una barra de navegación para ocultar/mostrar en ReactJS. Pero en el primer clic recibo este error y funciona bien después del primer clic.
- Nota: es dos veces y no tengo idea de por qué.
Aquí está mi código y solo funciona (después del primer error) cuando
setMenu(!menu);
es antes
nav.classList.toggle("nav-abrir");
de lo contrario, el error sigue llegando.
export default function Navbar() { const [menu, setMenu] = useState(true); const nav = document.querySelector("nav"); const openNav = () => { setMenu(!menu); nav.classList.toggle("nav-open"); }; return ( <nav id="nav-wrapper"> <header className="nav-header"> <div className="arrow-btn" onClick={() => { openNav(); }} > {menu ? ( <Icon.HiChevronDoubleLeft size={20} className="arrows" /> ) : ( <Icon.HiChevronDoubleRight size={20} className="arrows" /> )} </div> <img src={Profiledp} alt="." /> <p className="name">Naman Pokhriyal</p> </header> </nav>1 Respuestas
Responde la pregunta0
Esta no es la forma correcta de hacer esto en React en primer lugar. Ya está usando el valor de estado del menu para determinar si el menú está abierto o no, entonces, ¿por qué no continuar usando el valor de estado del menu para determinar si el menú está abierto o no? Algo como esto:
const openNav = () => { setMenu(!menu); }; return ( <nav id="nav-wrapper" className={menu ? "nav-open" : ""}> // etc. );Básicamente, cada vez que intente manipular directamente el DOM en React, dé un paso atrás e intente encontrar una manera de administrarlo a través del estado. La manipulación directa de DOM en React casi siempre conduce a errores a menos que realmente sepa lo que está haciendo bajo el capó en el marco.