0
117
ViewsEstablecer estilos de clase para elementos en un componente de reacción
Traté de poner un subrayado en mi lista de navegación con este código.
const [classOn, setClassOn] = useState('menu_selected'); const [linkMenu, setLinkMenu] = useState(''); function handleSelectedMenu(nb){ setLinkMenu(document.querySelectorAll('nav ul li')); for(let i=1; i<linkMenu.length; i++){ linkMenu[i].firstChild.classList.remove(classOn) } linkMenu[nb].firstChild.classList.add(classOn) }en pantalla completa, no pasa nada y aparece un error en el registro de mi consola
Uncaught TypeError: Cannot read properties of undefined (reading 'firstChild')pero cuando abro el visor móvil, se aplican los estilos.
·
Juan Pablo Isaza
3 answers
Answer question0
Puede cambiar el nombre de la clase directamente en el elemento en función de un estado existente, como:
function classNames(...classes) { return classes.filter(Boolean).join(" "); } function FakeElement = () => { const [hidden, setHidden] = useState(false); return ( <li className={classNames( hidden ? "hidden-class" : "", "default-class other-default-class" )} >Stuff</li> ); }Puede agregar muchas condiciones en la función classNames.
·
Juan Pablo Isaza
Report
0
deberías probar algo como esto.
<ul onMouseOver={() => setLinkMenu(true)} onMouseLeave={() => setLinkMenu(false)} className={`${linkMenu ? 'block ' : 'hidden '}`} > {options.map((option) => ( <li className="text-sm p-2 block w-full" key={option} onClick={() => setLinkMenu(false)}>{option}</li> </ul>
·
Juan Pablo Isaza
Report
0
Resuelvo el problema usando styles.menu_selected .
·
Juan Pablo Isaza
Report
Answer question