es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React NavLink cambia el subelemento según isActive.

30 Jul, 2023 Programación

Tengo el siguiente enlace:

<navlink to="{x.url}" classname="{(x)" ==""> x.isActive ? 'active' : 'not-active' }>
    <img src="{`icon-default.svg`}"> // cambiar de default.svg a active.svg<br>
    Texto del enlace
</navlink>

Tengo mis íconos dentro del HTML y no en el CSS, quiero llamar a una imagen diferente según isActive, ¿es posible hacerlo en un subelemento (la etiqueta img)?

react-router-dom": "^6.0.2

Gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible llamar a una img diferente según isActive en un subelemento dentro del componente NavLink. Una forma de lograr esto es utilizando un operador ternario dentro del atributo src de la etiqueta img, como se muestra a continuación:

    <navlink to="{x.url}" classname="{x.isActive" 'active'="" :="" 'not-active'}="">
    <img src="{x.isActive" 'active.svg'="" :="" 'default.svg'}="">
    Texto de enlace
</navlink>

    En este ejemplo, si isActive es verdadero, entonces active.svg se utilizará como el src para la etiqueta img, de lo contrario se utilizará default.svg.

Comments are closed.