Cuando trabajas con Solid, el sistema de JSX no solo te permite mezclar JavaScript y HTML de forma natural, sino que también ofrece herramientas altamente optimizadas para controlar qué se muestra y cuándo se muestra. Dominar el renderizado condicional es fundamental para construir interfaces reactivas que respondan al estado de tu aplicación.
¿Cómo funciona el renderizado condicional con expresiones ternarias en JSX?
Gracias a que JSX permite insertar expresiones de JavaScript dentro del HTML usando llaves {}, es posible utilizar operadores ternarios para decidir qué contenido renderizar. Un caso práctico es cambiar el ícono del botón de dark mode [0:36]:
- Si
darkMode es true, se muestra un sol (indicando que puedes cambiar a light mode).
- Si
darkMode es false, se muestra una luna (indicando que puedes cambiar a dark mode).
Esto se logra con una expresión ternaria, que es esencialmente una condicional en línea. El resultado es que el usuario siempre recibe retroalimentación visual sobre el modo activo.
¿Cómo usar signals para manejar estados de toggle?
Para ir más allá del ejemplo del ícono, se puede crear un signal que represente un estado como completed [1:32]. Este signal inicia en false y se alterna cada vez que el usuario hace clic en un elemento. La implementación sigue estos pasos:
- Se define el signal con un valor por defecto de
false.
- Se agrega un handler de
onClick en el elemento interactivo, por ejemplo un span.
- Dentro del handler, se invierte el valor actual: si está en
true pasa a false, y viceversa.
Con este estado reactivo, puedes usar otra expresión ternaria dentro del JSX para mostrar, por ejemplo, el texto envuelto en una etiqueta <s> (que lo subraya o tacha) cuando completed es true, o mostrarlo sin formato cuando es false [2:20].
jsx
<span onClick={() => setCompleted(!completed())}>
{completed() ? <s>Abrazar pingüino</s> : "Abrazar pingüino"}
</span>
Este enfoque funciona, pero a medida que la aplicación crece, las expresiones ternarias anidadas se vuelven difíciles de mantener y leer.
¿Qué es el componente Show y por qué es más ergonómico?
Solid incluye componentes especializados para renderizado condicional, y el más utilizado es Show [3:08]. Este componente recibe un atributo when donde se indica la condición que debe cumplirse para renderizar su contenido interno.
jsx
<Show when={completed()} fallback={"Abrazar pingüino"}>
<s>Abrazar pingüino</s>
</Show>
when: recibe la condición booleana. Si es true, renderiza lo que está dentro del componente.fallback: define qué se muestra cuando la condición es false.
En el ejemplo, cuando completed() es true, el texto aparece con la etiqueta <s> que lo tacha. Cuando es false, se muestra el texto plano definido en el fallback [3:50].
¿Por qué preferir Show sobre ternarias en proyectos grandes?
La ventaja principal de Show es la legibilidad del código. En lugar de anidar ternarias que se vuelven complejas, el componente ofrece una estructura declarativa y clara:
- Separa visualmente el caso positivo del fallback.
- Facilita el mantenimiento cuando hay múltiples condiciones.
- Se integra con el sistema reactivo de Solid sin sacrificar rendimiento.
Este patrón es especialmente valioso cuando trabajas en equipos o en bases de código extensas, donde la claridad importa tanto como la funcionalidad.
¿Cuáles son las técnicas clave para renderizado condicional en Solid?
En resumen, Solid ofrece dos caminos principales:
- Expresiones ternarias en JSX: ideales para condiciones simples y rápidas, como alternar un ícono.
- Componente Show con
when y fallback: recomendado para lógica más elaborada donde la legibilidad es prioritaria.
Ambas técnicas se alimentan de los signals, el sistema reactivo central de Solid que permite que la interfaz se actualice automáticamente cuando el estado cambia. Comparte en los comentarios cómo estás aplicando el renderizado condicional en tus proyectos con Solid.
