Renderizado Condicional

Tus componentes a menudo necesitarán mostrar cosas diferentes dependiendo de distintas condiciones. En React, puedes renderizar JSX condicionalmente usando sintaxis de JavaScript comoifstatements,&&, y los operadores? :.

Devolver JSX condicionalmente

Supongamos que tienes un componentePackingListque renderiza variosItems, los cuales pueden marcarse como empacados o no:

Observa que algunos de los componentesItemtienen su propisPackedestablecida entrueen lugar defalse. Quieres añadir una marca de verificación (✅) a los elementos empacados siisPacked={true}.

Puedes escribirlo como unasentencia if/elseasí:

Si la propisPacked es true, este códigodevuelve un árbol JSX diferente.Con este cambio, algunos de los elementos obtienen una marca de verificación al final:

¡Intenta editar lo que se devuelve en cada caso y observa cómo cambia el resultado!

Observa cómo estás creando lógica de ramificación con las sentenciasif y returnde JavaScript. En React, el flujo de control (como las condiciones) se maneja con JavaScript.

Devolver nada condicionalmente connull

En algunas situaciones, no querrás renderizar nada en absoluto. Por ejemplo, supongamos que no quieres mostrar los elementos empacados. Un componente debe devolver algo. En este caso, puedes devolvernull:

SiisPackedes verdadero, el componente no devolverá nada,null. De lo contrario, devolverá JSX para renderizar.

En la práctica, devolvernulldesde un componente no es común porque podría sorprender a un desarrollador que intente renderizarlo. Más a menudo, incluirías o excluirías condicionalmente el componente en el JSX del componente padre. ¡Así es cómo se hace!

Incluir JSX condicionalmente

En el ejemplo anterior, controlabas qué árbol JSX (¡si alguno!) sería devuelto por el componente. Quizás ya hayas notado cierta duplicación en la salida del renderizado:

es muy similar a

Ambas ramas condicionales devuelven<li className="item">...</li>:

Aunque esta duplicación no es perjudicial, podría dificultar el mantenimiento de tu código. ¿Qué pasa si quieres cambiar laclassName? ¡Tendrías que hacerlo en dos lugares de tu código! En tal situación, podrías incluir condicionalmente un poco de JSX para hacer tu código másDRY.

Operador condicional (ternario) (? :)

JavaScript tiene una sintaxis compacta para escribir una expresión condicional: eloperador condicionalu "operador ternario".

En lugar de esto:

Puedes escribir esto:

Puedes leerlo como"siisPackedes verdadero, entonces (?) renderizaname + ' ✅', de lo contrario (:) renderizaname".

Ahora digamos que quieres envolver el texto del elemento completado en otra etiqueta HTML, como<del>para tacharlo. Puedes agregar aún más saltos de línea y paréntesis para que sea más fácil anidar más JSX en cada uno de los casos:

Este estilo funciona bien para condiciones simples, pero úsalo con moderación. Si tus componentes se vuelven confusos con demasiado marcado condicional anidado, considera extraer componentes hijos para limpiar las cosas. En React, el marcado es parte de tu código, por lo que puedes usar herramientas como variables y funciones para ordenar expresiones complejas.

Operador lógico AND (&&)

Otro atajo común que encontrarás es eloperador lógico AND (&&) de JavaScript.Dentro de los componentes de React, a menudo aparece cuando quieres renderizar algo de JSX cuando la condición es verdadera,o no renderizar nada en caso contrario.Con&&, podrías renderizar condicionalmente la marca de verificación solo siisPackedestrue:

Puedes leer esto como“siisPacked, entonces (&&) renderiza la marca de verificación, de lo contrario, no renderices nada”.

Aquí está en acción:

Unaexpresión && de JavaScriptdevuelve el valor de su lado derecho (en nuestro caso, la marca de verificación) si el lado izquierdo (nuestra condición) estrue. Pero si la condición esfalse, toda la expresión se convierte enfalse. React considerafalsecomo un “hueco” en el árbol JSX, al igual quenull o undefined, y no renderiza nada en su lugar.

Asignar JSX a una variable condicionalmente

Cuando los atajos obstaculizan la escritura de código simple, intenta usar una sentenciaify una variable. Puedes reasignar variables definidas conlet, así que comienza proporcionando el contenido predeterminado que quieres mostrar, el nombre:

Utiliza una sentenciaifpara reasignar una expresión JSX aitemContentsiisPackedestrue:

Las llaves abren la “ventana al mundo de JavaScript”.Incrusta la variable con llaves en el árbol JSX devuelto, anidando la expresión calculada previamente dentro del JSX:

Este estilo es el más detallado, pero también es el más flexible. Aquí está en acción:

Como antes, esto funciona no solo para texto, sino también para JSX arbitrario:

Si no estás familiarizado con JavaScript, esta variedad de estilos puede parecer abrumadora al principio. Sin embargo, aprenderlos te ayudará a leer y escribir cualquier código JavaScript — ¡y no solo componentes de React! Elige el que prefieras para empezar, y luego consulta esta referencia nuevamente si olvidas cómo funcionan los otros.

Recapitulación

• En React, controlas la lógica condicional con JavaScript.
• Puedes devolver una expresión JSX condicionalmente con una sentenciaif.
• Puedes guardar condicionalmente algo de JSX en una variable y luego incluirlo dentro de otro JSX usando las llaves.
• En JSX,{cond ? <A /> : <B />}significa“sicond, renderiza<A />, de lo contrario<B />”.
• En JSX,{cond && <A />}significa“sicond, renderiza<A />, de lo contrario nada”.
• Los atajos son comunes, pero no tienes que usarlos si prefieres unifsimple.