Consejos Tecnológicos

3 formas de implementar la representación condicional en React

React permite a los usuarios crear aplicaciones de una sola página (SPA) que son altamente interactivas y dinámicas. Podemos crear componentes y renderizarlos, usar el estado para almacenar información y muchas otras características en React para construir diferentes tipos de aplicaciones.

Cuando estamos desarrollando aplicaciones, puede haber situaciones en las que necesitemos restringir los derechos de acceso de los usuarios en la aplicación. En esa etapa, comenzaron a aparecer algunos mecanismos de autenticación y promover operaciones a través de la verificación, como la verificación del formulario de inicio de sesión, el inicio de sesión en diferentes aplicaciones, etc. Pero, ¿cómo incluir estos mecanismos en una aplicación React? Esto se puede hacer usando una función especial de React llamada «Representación condicional«.

¿Qué es la representación condicional en aplicaciones web?

Es el concepto de renderizar componentes en una aplicación React basándose en ciertas condiciones (verdaderas o falsas). Con la ayuda del renderizado condicional, podemos ocultar o mostrar ciertos elementos en la aplicación, así como más contenido para implementar este concepto en el proceso de desarrollo de la aplicación. En React, el mecanismo de trabajo de la representación condicional es el mismo que el de las condiciones en JavaScript.

Podemos aplicar las características de la representación condicional en los siguientes escenarios

  • Ocultar o mostrar elementos
  • Mecanismo de autorización y autenticación
  • Renderizar datos externos desde API
  • Cambiar la función de la aplicación

Consideremos un pequeño ejemplo de operaciones a nivel de usuario. Crearemos una pequeña aplicación que muestra escenarios de inicio y cierre de sesión. Estos escenarios funcionan de forma alternativa. Por ejemplo, cuando se llama al inicio de sesión, se muestran algunos mensajes de texto como «Usuario de bienvenida» en la aplicación y se muestra el cierre de sesión en la pantalla. Al cerrar la sesión, la pantalla mostrará algunos textos como «Cierre de sesión exitoso» y botones de inicio de sesión. Este proceso de diseño de páginas en una aplicación se puede implementar en función de las características de la representación condicional en React.

Comando para crear la aplicación React

Abra un símbolo del sistema y escriba el siguiente comando

npx create-react-app demo-app 
cd demo-app 
npm start 

Podemos ver a continuación cómo usar la función de representación condicional en reaccionar para lograr operaciones a nivel de usuario: –

Index.js (usando el modelo if / else)

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
// function describes the person who have logged into the application 
function LoggedInUser(props) { 
  return 
       

Welcome, to Upgrad KnowledgeHut 

       

 You have loggined in successfully 

     
;  }  // function describes the person who have logged out of the application  function LoggedOutUser(props) {    return 
       

Login to UKH 

       

You have logged out, please log in again

     
;  }   // conditional rendering is implemented here, basic on the call  // in the reactdom.render component  // props value is given as input  function LoggedStatus(props) {    const isLoggedIn = props.isLoggedIn;    // if “true”, redirect to loggedInUser function    if (isLoggedIn) {      return  />;    }  // if “false”, redirect to loggedOutUser function  return  />;  }  // props value is initialized here  ReactDOM.render(  // rendering is performed based on the value of true or false  // prop value can be set in using blue color area either true or false     isLoggedIn={false} />,    document.getElementById('root')  ); 

Archivo de índice

body { 
  margin: 0; 
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 
    sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
} 
code { 
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 
    monospace; 
} 

Podemos insertar el código en el archivo correspondiente y luego ejecutar la aplicación en el tipo de terminal «Empiece por encima del nivel del mar» Y la salida se muestra en el navegador. Actualice cualquier código en el archivo de la aplicación de reacción cada vez, luego guárdelo, y luego la salida se refleja directamente en el navegador.

Producción

  • Si el valor de la prop es «Incorrecto«

  • Si el valor de la prop es «verdadero«

3 formas de implementar la representación condicional en React

Al procesar el programa anterior, no es necesario cambiar manualmente el valor «verdadero» o «falso» en la función de renderizado, podemos agregar funciones a la aplicación agregando botones. Podemos usar variables para almacenar elementos, estas variables ayudan a renderizar parte del componente de acuerdo con condiciones específicas y mantener el resto intacto.

El mecanismo de representación condicional se puede implementar a través de variables y componentes. A continuación, agregaremos componentes como Inicio de sesión y cierre de sesión para lograr esta función. También creamos un componente con estado para representar actividades a través del mecanismo de clase en react.

Usamos componentes para proporcionar funciones, el código es el siguiente:

Index.js (using if / else model) 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
// function describes the person who have logged into the application 
function LoggedInUser(props) { 
  return 
       

Welcome, to Upgrad KnowledgeHut 

       

 You have loggined in successfully 

     
;  }  // function describes the person who have logged out of the application  function LoggedOutUser(props) {    return 
       

Login to UKH 

       

You have logged out, please log in again

     
;  }  // component -- Login  function LoginButton(props) {    return (       onClick={props.onClick}>        Log In          );  }  // component -- Logout  function LogoutButton(props) {    return (       onClick={props.onClick}>        Log Out          );  } // Implementing a Stateful Component, for rendering the components  class LoginControl extends React.Component {    constructor(props) {      super(props);      this.handleLoginClick = this.handleLoginClick.bind(this);      this.handleLogoutClick = this.handleLogoutClick.bind(this);      this.state = {isLoggedIn: false};    }  // when one component is clicked, the other component would be in off state    handleLoginClick() {      this.setState({isLoggedIn: true});    }    handleLogoutClick() {      this.setState({isLoggedIn: false});    }  // Rendering the components based on the clicking event    render() {      const isLoggedIn = this.state.isLoggedIn;      let button;      if (isLoggedIn) {        button =  onClick={this.handleLogoutClick} />;      } else {        button =  onClick={this.handleLoginClick} />;      }      return (        
           isLoggedIn={isLoggedIn} />          {button}        
      );    }  }  ReactDOM.render(    ,    document.getElementById('root')  ); 

Producción

  • Si la llamada de renderización es «Incorrecto«

3 formas de implementar la representación condicional en React

  • Si la llamada de renderización es «verdadero«

3 formas de implementar la representación condicional en React

Representación condicional en React

React facilita la creación de múltiples componentes, que a su vez contiene los comportamientos que necesitamos para desarrollar aplicaciones con él. Después de definir el componente en la aplicación, renderizamos el componente de acuerdo con algunas condiciones. Según las condiciones de nuestra aplicación, el componente decide qué elemento devolver en último lugar.

Podemos seguir algunas otras técnicas para la representación condicional en React. ellos son: –

  • Si mas
  • Operador ternario
  • Operador lógico AND

Si mas

En React, es una declaración de representación condicional simple implementada en el método de representación. En el componente, se limita a bloques específicos. Esta instrucción if-else funciona en un proceso bidireccional. El proceso bidireccional es como si un bloque de código no cumple una condición determinada, pasará a otro bloque de código. Si la condición dada es verdadera, devuelve «Si«De lo contrario, vuelve»Otro«.

sintaxis

if(condition) 
{ 
 // block of code 
} 
Else 
{ 
 // block of code 
} 

«Si«Declara que se está desarrollando una aplicación de la siguiente manera: –

Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
// defining the functions 
function Before(props) {   
  return 

Before the company name is KnowledgeHut,       and is not Considered now with the same name

;    }    function After(props) {      return 

Company name is changed,   and it is Upgrad KnowledgeHut Now

;    }    // props value is passed here  // and the corresponding output is rendered  // using the conditional rendering  function Change(props) {      const isConsidered = props.isConsidered;      if (isConsidered) {        return  />;      }      else {    return  />;      }  }    // props value is initialized here    // prop value can be set in using blue color area either true or false  ReactDOM.render(       isConsidered={true} />,      document.getElementById('root')    );   

Podemos insertar el código en el archivo correspondiente y luego ejecutar la aplicación en el tipo de terminal «Empiece por encima del nivel del mar» Y la salida se muestra en el navegador. Actualice cualquier código en el archivo de la aplicación de reacción cada vez, luego guárdelo, y luego la salida se refleja directamente en el navegador.

Producción

  • Si el valor de la prop es «Incorrecto«

3 formas de implementar la representación condicional en React

  • Si el valor de la prop es «verdadero«

3 formas de implementar la representación condicional en React

Operador ternario

Este operador se utiliza cuando dos bloques de código se alternan entre sí en determinadas condiciones. Este operador es como «Si mas«Declaración. Este operador ternario se usa como una abreviatura de if-else y está escrito en una línea. Requiere 3 operandos y devuelve una salida basada en él.

sintaxis

¿situación?verdadero y falso

Si la condición es verdadera, entonces 1Yingshi La declaración se rendirá, de lo contrario 2Dakota del Norte Una persona rendirá

Los ejemplos de operadores ternarios en la representación condicional son los siguientes:

Index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
// defining functions 
function CompanyName() { 
  return 

Name is Upgrad KnowledgeHut

;  }  function CompanyLocation() {    return 

Location is Bangalore

;  }  // taking prop value as input  function Company(props) {    const info = props.info;    return (      <>  // usage of ternary operator        { info ?  :  }          );

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba