Estoy tratando de agregar y eliminar una clase al hacer clic en un elemento de mi encabezado, pero me cuesta hacerlo y no sé cómo asignar los elementos representados en el componente del encabezado.
Aquí está la primera parte del código con una función que funciona para enrutamiento y ventana.ubicación.
Puedo agregar la clase, pero se agrega a cada elemento en el que se hace clic y se elimina solo cuando hago clic nuevamente en él.
import React, { useState } from 'react'; const Link = ({ href, children }) => { const [activeItem, setActiveItem] = useState(false); const onClick = (event) => { if (event.metaKey || event.ctrl) { return; } event.preventDefault(); window.history.pushState({}, '', href); const navEvent = new PopStateEvent('popstate'); window.dispatchEvent(navEvent); setActiveItem(!activeItem); }; return ( <a onClick={onClick} className={`item ${activeItem ? 'active' : ''}`} href={href} > {children} </a> ); }; export default Link;Aquí está mi elemento de encabezado en su lugar:
import React from 'react'; import Link from './Link'; import Logo from './Logo'; const Header = () => { return ( <div className="ui secondary pointing menu"> <Link href="/"> <Logo /> </Link> <div className="pointing right menu"> <Link href="/services">services</Link> <Link href="/works">works</Link> <Link href="/contacts">contacts</Link> </div> </div> ); }; export default Header;Debe hacer que sus componentes de enlace se reconozcan entre sí elevando el estado a su componente de encabezado. Luego, le dice a los componentes de su enlace qué enlace está actualmente seleccionado pasándolo como accesorio y también debe darles la capacidad de cambiar qué enlace está actualmente seleccionado:
import React from 'react'; import Link from './Link'; import Logo from './Logo'; const Link = ({ href, children, isActive, handleClick }) => { const onClick = (event) => { if (event.metaKey || event.ctrl) { return; } event.preventDefault(); window.history.pushState({}, '', href); const navEvent = new PopStateEvent('popstate'); window.dispatchEvent(navEvent); handleClick(); }; return ( <a onClick={onClick} className={`item ${isActive ? 'active' : ''}`} href={href} > {children} </a> ); }; export default Link; const Header = () => { const [activeLink, setActiveLink] = useState(0) return ( <div className="ui secondary pointing menu"> <Link href="/" isActive={activeLink === 0} handleClick={() => setActiveLink(0)} > <Logo /> </Link> <div className="pointing right menu"> <Link href="/services" isActive={activeLink === 1} handleClick={() => setActiveLink(1)} > services </Link> <Link href="/works" isActive={activeLink === 2} handleClick={() => setActiveLink(2)} > works </Link> <Link href="/contacts" isActive={activeLink === 3} handleClick={() => setActiveLink(3)} > contacts </Link> </div> </div> ); }; export default Header;