Hay varias maneras de escribir condicionales en React, algunas de las cuales son más eficientes y efectivas que otras. En este artículo, exploraremos formas más inteligentes de escribir condicionales en React que deberías conocer.
Renderizado condicional en React
El renderizado condicional es el proceso de renderizar diferentes componentes o elementos basándose en ciertas condiciones. En React, puedes usar diferentes técnicas para lograr el renderizado condicional, incluyendo sentencias if-else, operadores ternarios, sentencias switch y operadores lógicos.
Veamos cada una de estas técnicas en detalle y exploremos cómo se pueden utilizar en React.
Sentencias If-else
Las sentencias if-else son una forma común de escribir condicionales en JavaScript, y también se pueden utilizar en React. Puedes usar sentencias if-else para renderizar condicionalmente componentes o elementos en tu aplicación React. Aquí tienes un ejemplo:
import React from 'react';
function Example(props) {
if (props.isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please log in.</h1>;
}
}En este ejemplo, utilizamos una sentencia if-else para mostrar condicionalmente un mensaje "Bienvenido" o un mensaje "Por favor, inicie sesión" en función del valor de la propiedad isLoggedIn.
Operadores ternarios
Los operadores ternarios son una forma abreviada de escribir sentencias if-else en JavaScript. También se pueden utilizar en React para la representación condicional. He aquí un ejemplo:
import React from 'react';
function Example(props) {
return (
<div>
{props.isLoggedIn ? (
<h1>Welcome back!</h1>
) : (
<h1>Please log in.</h1>
)}
</div>
);
}En este ejemplo, utilizamos un operador ternario para mostrar condicionalmente un mensaje de "¡Bienvenido de nuevo!" o un mensaje de "Por favor, inicie sesión" en función del valor de la propiedad isLoggedIn. Observe que el operador ternario está entre llaves dentro del código JSX.
Sentencias Switch
Las sentencias switch son otra forma de escribir condicionales en JavaScript. Pueden usarse en React para el renderizado condicional, aunque son menos comunes que las sentencias if-else y los operadores ternarios. He aquí un ejemplo:
import React from 'react';
function Example(props) {
switch (props.userType) {
case 'admin':
return <h1>Welcome back, admin!</h1>;
case 'user':
return <h1>Welcome back, user!</h1>;
default:
return <h1>Please log in.</h1>;
}
}En este ejemplo, utilizamos una sentencia switch para mostrar condicionalmente diferentes mensajes basados en el valor de la prop userType.
Operadores Lógicos
Los operadores lógicos como && y || pueden usarse para la representación condicional en React. Aquí hay un ejemplo usando el operador &&:
import React from 'react';
function Example(props) {
return (
<div>
{props.isLoggedIn && <h1>Welcome back!</h1>}
</div>
);
}En este ejemplo, utilizamos el operador && para mostrar condicionalmente un mensaje de "¡Bienvenido de nuevo!" sólo si la propiedad isLoggedIn es verdadera.
Formas más inteligentes de escribir condicionales en React
Mientras que las técnicas que hemos discutido hasta ahora son todas formas válidas de escribir condicionales en React, hay formas más inteligentes que pueden hacer tu código más eficiente y efectivo. Veamos algunas de estas formas más inteligentes.
Funciones Inline
Una forma de hacer más inteligente tu renderización condicional en React es usar funciones inline. En lugar de escribir declaraciones if-else u operadores ternarios dentro del código JSX, puedes definir una función separada para manejar la representación condicional. Aquí tienes un ejemplo:
import React from 'react';
function Example(props) {
const renderWelcomeMessage = () => {
if (props.isLoggedIn) {
return <h1>Welcome back!</h1>;
} else {
return <h1>Please log in.</h1>;
}
}
return (
<div>
{renderWelcomeMessage()}
</div>
);
}En este ejemplo, definimos una función en línea llamada renderWelcomeMessage que maneja la representación condicional basada en la propiedad isLoggedIn. Luego llamamos a esta función dentro del código JSX para mostrar el mensaje apropiado.
El uso de funciones inline puede hacer que tu código sea más organizado y fácil de leer, especialmente si tu lógica de renderizado condicional es compleja.
Renderizado condicional en componentes de orden superior
Otra forma de hacer tu renderizado condicional en React más inteligente es usar componentes de orden superior (HOCs). Los HOCs son funciones que toman un componente como entrada y devuelven un nuevo componente con funcionalidad añadida. Puedes usar HOCs para renderizar condicionalmente componentes basados en ciertas condiciones.
He aquí un ejemplo:
import React from 'react';
function withAuthentication(WrappedComponent) {
return function(props) {
if (props.isLoggedIn) {
return <WrappedComponent {...props} />;
} else {
return <h1>Please log in.</h1>;
}
}
}
function WelcomeMessage(props) {
return <h1>Welcome back!</h1>;
}
const AuthenticatedWelcomeMessage = withAuthentication(WelcomeMessage);
function Example(props) {
return (
<div>
<AuthenticatedWelcomeMessage isLoggedIn={props.isLoggedIn} />
</div>
);
} En este ejemplo, definimos un HOC llamado withAuthentication que toma un componente como entrada y devuelve un nuevo componente que renderiza condicionalmente el componente original basándose en la propiedad isLoggedIn.
A continuación, utilizamos este HOC para envolver el componente WelcomeMessage y crear un nuevo componente denominado AuthenticatedWelcomeMessage. Finalmente, renderizamos el componente AuthenticatedWelcomeMessage dentro del componente Example, pasando la prop isLoggedIn.
El uso de HOCs puede hacer que su código sea más modular y reutilizable, especialmente si necesita renderizar condicionalmente el mismo componente en múltiples lugares dentro de su aplicación.
Renderizado condicional en Render Props
Render props son otra técnica que puede hacer que tu renderizado condicional en React sea más inteligente. Render props son funciones que se pasan como props a un componente y se utilizan para renderizar el contenido de ese componente. Puedes usar render props para renderizar condicionalmente componentes basados en ciertas condiciones.
Aquí tienes un ejemplo:
import React from 'react';
function ConditionalRender(props) {
return props.render(props.isLoggedIn);
}
function Example(props) {
return (
<div>
<ConditionalRender isLoggedIn={props.isLoggedIn} render={isLoggedIn => (
isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>
)} />
</div>
);
}En este ejemplo, definimos un componente llamado ConditionalRender que toma una prop render y una prop isLoggedIn. La prop render es una función que toma la prop isLoggedIn como entrada y devuelve el contenido del componente basado en la prop isLoggedIn.
A continuación, utilizamos este componente dentro del componente Ejemplo, pasando la propiedad isLoggedIn y la función de renderizado para mostrar condicionalmente un mensaje de "¡Bienvenido de nuevo!" o un mensaje de "Por favor, inicie sesión".
El uso de props de renderizado puede hacer que su código sea más flexible y reutilizable, especialmente si necesita renderizar condicionalmente diferentes componentes basándose en diferentes condiciones.
Renderizado condicional con sentencias switch
Una sentencia switch es otra forma de hacer tu renderizado condicional en React más inteligente. Las sentencias switch pueden ser útiles cuando necesitas renderizar condicionalmente diferentes componentes basados en múltiples condiciones.
Aquí tienes un ejemplo:
import React from 'react';
function Example(props) {
let message;
switch (props.status) {
case 'success':
message = <h1>Success!</h1>;
break;
case 'error':
message = <h1>Error!</h1>;
break;
default:
message = <h1>Loading...</h1>;
break;
}
return (
<div>
{message}
</div>
);
}En este ejemplo, definimos una sentencia switch que establece condicionalmente la variable de mensaje basándose en el estado prop. Luego renderizamos la variable de mensaje dentro del código JSX.
Usar sentencias switch puede hacer tu código más organizado y fácil de leer, especialmente si necesitas renderizar condicionalmente diferentes componentes basados en múltiples condiciones.
Renderizado condicional con React Hooks
Por último, los hooks de React también se pueden utilizar para hacer que tu renderizado condicional en React sea más inteligente. Los hooks de React son funciones que te permiten usar el estado y otras características de React dentro de componentes funcionales.
Aquí tienes un ejemplo:
import React, { useState } from 'react';
function Example(props) {
const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? 'Log out' : 'Log in'}
</button>
</div>
);
}En este ejemplo, utilizamos el hook useState para definir una variable de estado llamada isLoggedIn. A continuación, mostramos condicionalmente un mensaje de "¡Bienvenido de nuevo!" o un mensaje de "Por favor, inicie sesión" en función del valor de isLoggedIn. También mostramos un botón que cambia el valor de isLoggedIn cuando se pulsa.
Usar hooks de React puede hacer que tu código sea más conciso y fácil de gestionar, especialmente si necesitas usar estado u otras características de React dentro de componentes funcionales.
Conclusión
En este artículo, hemos cubierto cinco formas más inteligentes de escribir condicionales en React que deberías conocer. Usando estas técnicas, puedes hacer que tu renderizado condicional sea más organizado, flexible y reutilizable, y tu código más conciso y fácil de gestionar. Tanto si eres un principiante como un desarrollador React experimentado, estas técnicas pueden ayudarte a escribir mejor código y construir mejores aplicaciones React.