Discúlpeme si olvido algo: esta es mi primera publicación en Stack Overflow.
El propósito de la función es abrir y cerrar mi menú de hamburguesas. Adjunté una instantánea del archivo JSX donde se encuentra este problema: NavbarLinks.jsx . Las líneas de código con las que estoy luchando son la 15 y la 18, donde intento declarar una clase de módulo CSS como una variable.
const [navLinkOpen, navLinkToggle] = useState(false); const handleNavLinksToggle = () => { navLinkToggle(!navLinkOpen); }; const renderClasses = () => { let classes = {`${styles.navLinks}`}; if (navLinkOpen) { classes += {`${styles.active}`}; } return classes; };Luego llamo a la clase devuelta dentro de la etiqueta ul en la línea 27.
<ul className={renderClasses}>He intentado varias variaciones de declarar esta clase como una variable, lo que les muestro aquí es solo mi último intento. Soy consciente de que el intento que estoy usando ha roto el código. - Soy bastante nuevo en JavaScript y en lugar de simplemente seguir las guías de YouTube, aprendo mejor probando las cosas yo mismo.
Intente responder la pregunta que tengo en lugar de sugerir un método alternativo, ¡simplemente porque solo quiero aprender más sobre esto! - pero si tiene métodos alternativos de lo que estoy tratando de lograr aquí, también me gustaría verlos.
También incluiré una instantánea del archivo del módulo CSS con el que estoy trabajando en caso de que pueda resultarle útil: NavbarLinksStyle.module.css
Gracias de antemano por cualquier ayuda, estaré disponible para responder cualquier pregunta.
ante todo felicidades por el post. Está muy bien explicado. El código que compartió parece estar bastante bien en general, pero por lo que puedo ver, le falta la ejecución de la función renderClasses .
const [navLinkOpen, navLinkToggle] = useState(false); const handleNavLinksToggle = () => { navLinkToggle(!navLinkOpen); }; const renderClasses = () => { let classes = styles.navLinks; if (navLinkOpen) { classes += styles.active; } return classes; }; {...} <ul className={renderClasses()}> {...}Además, puede lograr el mismo resultado usando una variable en lugar de una función:
const renderClasses = `${styles.navLinks} ${navLinkOpen ? styles.active : ''}`;EDITAR : También como señaló @Mina, debe deshacerse de las llaves en su función de renderizado.
En primer lugar, no debe declarar la variable de clases con corchetes.
const renderClasses = () => { let classes = styles.navLinks if (navLinkOpen) { classes += styles.active } return classes; };