La representación condicional se refiere a cambiar el comportamiento de una aplicación según su estado. Por ejemplo, puede cambiar el mensaje de saludo de su aplicación React a oscuro durante la noche. De esta manera, tiene un mensaje de pantalla diferente dependiendo de la hora del día.

El renderizado condicional le permite renderizar diferentes componentes o elementos de React si se cumple una condición. En este tutorial, aprenderá sobre las diferentes formas en que puede usar la representación condicional en las aplicaciones React.js.

Formas en que puede implementar la representación condicional

Para seguir estos ejemplos, debe tener una comprensión básica de cómo funciona React. Si tiene dificultades en ese caso, no se preocupe, tenemos un útil guía para principiantes de React.js.

Uso de declaraciones condicionales

Al igual que en JavaScript, puede usar declaraciones condicionales como if…else para crear elementos cuando se cumplen ciertas condiciones.

Por ejemplo, puede mostrar un elemento específico en el

si bloquear cuando se cumple una condición y mostrar una diferente en el demás bloquear si no se cumple la condición.

Considere el siguiente ejemplo que muestra un botón de inicio de sesión o cierre de sesión según el estado de inicio de sesión del usuario.

Tablero de funciones (accesorios) {
 const { isLoggedIn } = props
 si (está conectado){
 regreso Cerrar sesión
 } demás{
 regreso Acceso
 }
}

Esta función muestra un botón diferente dependiendo del está conectado valor pasado como prop.

Relacionados: Cómo usar accesorios en ReactJS

Alternativamente, puede usar el operador ternario. El operador ternario toma una condición seguida por el código a ejecutar si la condición es veraz seguido del código a ejecutar si la condición es falso.

Reescribe la función anterior como:

Tablero de funciones (accesorios) {
 const { isLoggedIn } = props
 regreso (
 <>
 {¿Está registrado?Cerrar sesión:Acceso)
 )
}

El operador ternario hace que la función sea más limpia y fácil de leer en comparación con el si… más declaración.

Declaración de variables de elementos

Las variables de elemento son variables que pueden contener elementos JSX y representarse cuando sea necesario en una aplicación React.

Puede usar variables de elementos para representar solo una parte determinada del componente cuando su aplicación cumple con la condición especificada.

Por ejemplo, si desea mostrar solo un botón de inicio de sesión cuando el usuario no haya iniciado sesión y un botón de cierre de sesión solo cuando haya iniciado sesión, puede usar variables de elementos.

función LoginBtn (accesorios) {
 regreso (

 Acceso

 );
}
function LogoutBtn (accesorios) {
 regreso (

 Cerrar sesión

 );
}
panel de funciones () {
 const [loggedIn, setLoggedIn] = useState (verdadero)
 const handleLogin = () => {
 setLoggedIn (verdadero)
 }
 const handleLogout = () => {
 setLoggedIn (falso)
 }
 dejar botón;
 si (registrado) {
 botón = 
 } demás {
 botón = 
 }
 regreso (
 <>
 {conectado}
 )
}

En el código anterior, primero creó los componentes del botón Iniciar sesión y Cerrar sesión y luego defina el componente para renderizar cada uno de ellos en diferentes condiciones.

En este componente, use el enlace de estado React para realizar un seguimiento de cuándo el usuario inicia sesión.

Relacionados: Domine sus habilidades de reacción aprendiendo estos ganchos adicionales

Ahora, dependiendo del estado, renderice el o componente.

Si el usuario no ha iniciado sesión, renderice el componente de lo contrario hacer thmi componente. Las dos funciones de manejo cambian el estado de inicio de sesión cuando se hace clic en el botón respectivo.

Uso de operadores lógicos

Puedes usar lógica && operador para renderizar condicionalmente un elemento. Aquí, un elemento se representa solo si la condición se evalúa como verdadera; de lo contrario, se ignora.

Si desea notificar a un usuario la cantidad de notificaciones que tiene solo cuando tiene una o más notificaciones, puede usar lo siguiente.

función ShowNotifications (accesorios) {
 const {notificaciones} = accesorios
 regreso (
 <>
 {notificaciones.longitud > 0 &&

 Tienes {notifications.length} notificaciones.


 }
 )
}

A continuación, para representar un elemento si la expresión lógica && se evalúa como un valor falso, encadene el || lógico operador.

La siguiente función muestra el mensaje "No tiene notificaciones" si no se pasan notificaciones como accesorios.

función ShowNotifications (accesorios) {
 const {notificaciones} = accesorios
 regreso (
 <>
 {notificaciones.longitud > 0 &&

 Tienes {notifications.length} notificaciones.
 || 
no tienes notificaciones

 }
 )
}

Evitar que un componente se renderice

Para ocultar un componente aunque haya sido renderizado por otro componente, devuelva nulo, en lugar de su salida.

Considere el siguiente componente que solo muestra un botón de advertencia si se pasa un mensaje de advertencia como accesorios.

Función Advertencia (accesorios) {
 const {mensaje de advertencia} = accesorios
 if (! mensaje de advertencia) {
 devolver nulo
 }
 regreso (
 <>
Advertencia
 )
}

Ahora, si pasa 'warningMessage' al componente, aparecerá un botón de advertencia. Sin embargo, si no lo hace, devolverá nulo y el botón no se mostrará.

 // se representa el botón de advertencia
 // el botón de advertencia no se procesa

Ejemplos de representación condicional en aplicaciones React de la vida real

Use la representación condicional para realizar diferentes tareas en su aplicación. Algunos de ellos incluyen renderizar datos de API solo cuando están disponibles y mostrar un mensaje de error solo cuando existe un error.

Representación de datos obtenidos de una API en React

Obtener datos de una API puede llevar un tiempo. Por lo tanto, primero, verifique si está disponible antes de usarlo en su aplicación; de lo contrario, React arrojará un error si no está disponible.

La siguiente función muestra cómo puede representar condicionalmente los datos devueltos por una API.

función FetchData() {
 const [datos, setData] = useState (nulo);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Obtener datos de la API usando Axios
 const fetchData = asíncrono () => {
 const respuesta = esperar axios.get (apiURL)
 // Actualizar estado con los datos
 setData (respuesta.datos) 
 }
 regreso (
 <>
Imagen astronómica del día.

 {
 datos && 
{datos.título}

{datos.explicación}

 }
 )
}

En la función anterior, obtenga los datos del API Apod de la NASA utilizando Axios. Cuando la API devuelve una respuesta, actualice el estado y use el operador lógico && para representar los datos solo cuando estén disponibles.

Relacionados: Cómo consumir API en React usando Fetch y Axios

Visualización de mensajes de error

En los casos en los que desee mostrar un error solo cuando exista, use la representación condicional.

Por ejemplo, si está creando un formulario y desea mostrar un mensaje de error si un usuario escribió un formato de correo electrónico incorrecto, actualice el estado con el mensaje de error y use una instrucción if para representarlo.

función mostrarError() {
 const [error, setError] = useState (nulo)
 regreso (
 <>
 {
 si (error) {
Ocurrió un error: {error}

 }
 }
 )
}

Elegir qué usar en su aplicación React

En este tutorial, aprendió sobre las diversas formas en que puede representar elementos JSX de forma condicional.

Todos los métodos discutidos proporcionan los mismos resultados. Elija qué usar según el caso de uso y el nivel de legibilidad que desea lograr.

Los 7 mejores tutoriales gratuitos para aprender a reaccionar y crear aplicaciones web

Los cursos gratuitos rara vez son tan completos y útiles, pero hemos encontrado varios cursos de React que son excelentes y lo ayudarán a comenzar con el pie derecho.

Leer siguiente

Sobre el Autor