Componente de renderizado condicional usando Enums en ReactJS

En algunas situaciones, el desarrollador de React Js necesita renderizar y ocultar componentes según la condición particular. Por ejemplo, al crear una aplicación de lista de tareas pendientes, el desarrollador debe procesar tareas si hay alguna tarea pendiente disponible; de ​​lo contrario, debe mostrar un mensaje como «No hay ninguna tarea pendiente disponible».

Hay varios métodos para renderizar componentes condicionalmente en Js reactivos, como if-else y operador ternario, etc. Si solo hay 2 o 3 componentes disponibles para renderizar condicionalmente, los desarrolladores pueden usar if-else o cambiar el método de mayúsculas y minúsculas. Si hay más de 3 componentes disponibles para renderizar condicionalmente, if-else se vuelve complejo. Por lo tanto, los desarrolladores deberían usar enumeraciones para mantener limpio el código.

En este tutorial, vamos a aprender cómo los desarrolladores pueden representar componentes condicionalmente usando enumeraciones. Para comenzar con las enumeraciones, los usuarios deben crear un nuevo proyecto de reacción.

Creando un proyecto de reacción:

Paso 1: Para crear un nuevo proyecto React, ejecute el siguiente comando en su terminal.

npx create-react-app testapp

Paso 2: para moverse dentro del directorio del proyecto, ejecute el siguiente comando en su terminal.

cd testapp

Ahora, ha creado la aplicación de reacción con éxito. 

A continuación, los usuarios deben crear de 2 a 3 componentes en nuestro proyecto. Cree una carpeta de ‘ componentes ‘ dentro de la carpeta ‘ src ‘. Además, cree los archivos first.js y second.js dentro de la carpeta de componentes.

Estructura del proyecto: Debería verse como la imagen de abajo.

En este archivo, agregaremos código básico de React para renderizar en la página web. El usuario debe agregar el siguiente código al archivo ‘first.js’.

Nombre de archivo: first.js

import React, { Component } from 'react';
 
// Some basic code to render first component
class First extends Component {
  render() {
    return (
      <div>
        <h1 style={{color: "green"}}>GeeksForGeeks</h1>
        <h2>This is a first component</h2>
      </div>
    );
  }
}
  
export default First;

 
En este archivo, agregaremos un código React básico que es diferente del primer componente. Entonces, podemos saber qué componente se está representando en la pantalla. Edite el archivo ‘segundo.js’ y agregue el siguiente código dentro de él.

Nombre de archivo: segundo.js

import React, { Component } from 'react';
 
// some basic code to render second component
class Second extends Component {
  render() {
    return (
      <div>
        <h1 style={{color: "green"}}>GeeksForGeeks</h1>
        <h2>This is a second component.</h2>
      </div>
    );
  }
}
  
export default Second;

 
componente usando enumeración 

Paso 1: en javascript, podemos crear un objeto con pares clave-valor y usarlo como una enumeración. A continuación, puede ver la demostración de un objeto javascript con un par clave-valor.

Sintaxis:

const Enumobj = {
  key: value,
};

Ejemplo:

const Enumobj = {
  first: <First />,
  second: <Second />
};

Paso 2: Ahora, crearemos una función javascript que tome un estado como parámetro y devuelva un componente React basado en el estado.

Sintaxis:

function Enum({state}){
  return {object[state]};
}

Ejemplo:

function Enum({ state }) {
  return <div>{Enumobj[state]}</div>;
}

Paso 3: Incrustemos la función ‘ Enumeración ‘ en nuestro componente ‘ Aplicación ‘. Al llamar a la función ‘ Enum ‘, agregaremos valor de estado como accesorios. 

Sintaxis:

 return (
      <div>
        <Enum state="Value"></Enum>
      </div>
    );

Ejemplo:

 return (
      <div>
        <Enum state="first"></Enum>
        <Enum state="second"></Enum>
      </div>
    );

Nombre de archivo: App.js

En el archivo App.js, primero crearemos un objeto de enumeración. Después de eso, agregaremos una función ‘ enum’ para representar los componentes según el valor del estado. Por último, editaremos el componente ‘ App ‘ y llamaremos a la función ‘ enum ‘ dentro del componente para representarlo condicionalmente. El usuario debe agregar el siguiente código al archivo ‘ App.js ‘.

Nombre de archivo: App.js

import React, { Component } from 'react';
import Second from './components/second'
import First from './components/first'
 
// Creating enum object
const Enumobj = {
  first: <First />,
  second: <Second />
};
 
// Creating enum function to return
// Particular component according to state value
function Enum({ state }) {
  return <div>{Enumobj[state]}</div>;
}
 
// Call enum function inside the App component
class App extends Component {
  render() {
    return (
      <div>
        <Enum state="first"></Enum>
        <Enum state="second"></Enum>
      </div>
    );
  }
}
  
export default App;

 
Pasos para ejecutar: el usuario debe ejecutar debajo del comando a la terminal en el directorio actual para ver el resultado.

 npm start

Producción: