¿Cómo puedo asignar varias clases a className mientras uso NavLink isActive ? En realidad, quiero agregar un estilo de enlace base como el tamaño de fuente y, si está activo, se debe aplicar la clase activa, de lo contrario, la clase de estilos base.
Mi componente:
<NavLink to={category.url} state={category} onClick={closeMenu} className={() => (category.id === locationId ? classes.active : classes.link)} > {category.name} </NavLink>Sé que puedo usar literales de plantilla y establecer una clase activa como esta:
className={() => (category.id === locationId ? `${classes.active} ${classes.link}` : classes.link)}¿Pero hay una forma más limpia?
Varias de las propiedades del componente NavLink toman una función de devolución de llamada a la que se pasa una propiedad isActive .
declare function NavLink( props: NavLinkProps ): React.ReactElement; interface NavLinkProps extends Omit< LinkProps, "className" | "style" | "children" > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: { isActive: boolean; }) => string | undefined); end?: boolean; style?: | React.CSSProperties | ((props: { isActive: boolean; }) => React.CSSProperties); }
Lo que puede hacer es pasar una función de devolución de llamada al NavLink que devuelve el valor de cadena combinado className .
Ejemplo:
<NavLink to={category.url} state={category} onClick={closeMenu} className={({ isActive }) => [ classes.link, isActive ? classes.active : null, ] .filter(Boolean) .join(" ") } > {category.name} </NavLink> Si no necesita saber qué enlace está realmente activo y realmente solo desea establecer las clases en category.id === locationId , aplique la misma lógica en esta condición diferente.
<NavLink to={category.url} state={category} onClick={closeMenu} className={() => [ classes.link, category.id === locationId ? classes.active : null, ] .filter(Boolean) .join(" ") } > {category.name} </NavLink>