React Conditional Rendering

 En React, puedes renderizar componentes condicionalmente.

Hay varias formas de hacer esto.

if Declaración

Podemos usar el ifoperador de JavaScript para decidir qué componente renderizar.

Usaremos estos dos componentes:

function MissedGoal() {

  return <h1>MISSED!</h1>;

}

function MadeGoal() {

  return <h1>Goal!</h1>;

}

Ahora, crearemos otro componente que elija qué componente renderizar según una condición:


function Goal(props) {

  const isGoal = props.isGoal;

  if (isGoal) {

    return <MadeGoal/>;

  }

  return <MissedGoal/>;

}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Goal isGoal={false} />);

Intente cambiar el isGoalatributo a true:

import React from 'react';

import ReactDOM from 'react-dom/client';


function MissedGoal() {

return <h1>MISSED!</h1>;

}


function MadeGoal() {

return <h1>GOAL!</h1>;

}


function Goal(props) {

  const isGoal = props.isGoal;

  if (isGoal) {

    return <MadeGoal/>;

  }

  return <MissedGoal/>;

}


const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Goal isGoal={true} />);

&&Operador lógico

Otra forma de renderizar condicionalmente un componente de React es mediante el uso del &&operador.

Ejemplo:
Podemos incrustar expresiones JavaScript en JSX usando llaves:

import React from 'react';
import ReactDOM from 'react-dom/client';

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 &&
        <h2>
          You have {cars.length} cars in your garage.
        </h2>
      }
    </>
  );
}

const cars = ['Ford', 'BMW', 'Audi'];
const root = ReactDOM.createRoot(document.getElementById('root'));

Si cars.length > 0 es igual a verdadero, &&se representará la expresión posterior.

Intente vaciar la carsmatriz:

function Garage(props) {
  const cars = props.cars;
  return (
    <>
      <h1>Garage</h1>
      {cars.length > 0 &&
        <h2>
          You have {cars.length} cars in your garage.
        </h2>
      }
    </>
  );
}

const cars = [];
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage cars={cars} />);

Operador ternario

Otra forma de representar elementos condicionalmente es mediante el uso de un operador ternario.

condition ? true : false

Volveremos al ejemplo de la meta.

Devuelve el MadeGoalcomponente si isGoallo es true; de lo contrario, devuelve el MissedGoalcomponente:

import React from 'react';

import ReactDOM from 'react-dom/client';


function MissedGoal() {

return <h1>MISSED!</h1>;

}


function MadeGoal() {

return <h1>GOAL!</h1>;

}


function Goal(props) {

  const isGoal = props.isGoal;

return (

<>

{ isGoal ? <MadeGoal/> : <MissedGoal/> }

</>

);

}



Comentarios

Publicar un comentario

Entradas populares de este blog

API Web Crypto,

 I have digital signature certificates efirma de sat mexico. I want an app to load the .key certificate and convert it to pem format. Once you convert it, display it in a textarea using the Web Crypto API. Tengo certificados de firma digital efirma de sat mexico. Quiero una aplicación que cargue el certificado .key y lo convierta a formato pem. Una vez que lo convierta, lo muestre en un área de texto utilizando la API Web Crypto. ChatGPT Plus ChatGPT To convert a .key certificate to PEM format using the Web Crypto API, you can use the following steps: Load the .key certificate file using the FileReader API. Here's an example code snippet to achieve that: javascript Copiar código const fileInput = document . querySelector ( 'input[type="file"]' ); const reader = new FileReader (); reader. onload = () => { const keyData = reader. result ; // Code to convert the key data to PEM format }; reader. readAsText (fileInput. files [ 0 ]); Convert the key dat...
Leer más

React Events

 Reaccionar eventos Al igual que los eventos HTML DOM, React puede realizar acciones basadas en eventos del usuario.React tiene los mismos eventos que HTML: hacer clic, cambiar, pasar el mouse, etc. Agregar eventos Los eventos de React están escritos en la sintaxis de camelCase: onClick en lugar de onclick . Los controladores de eventos de React están escritos entre llaves: onClick={shoot} en lugar de onclick="shoot()" . React: <button onClick={shoot}>Take the Shot!</button> Html: <button onclick="shoot()">Take the Shot!</button> Coloque la shootfunción dentro del Footballcomponente: function Football() {   const shoot = () => {     alert("Great Shot!");   }   return (     <button onClick={shoot}>Take the shot!</button>   ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Football />); Pasar argumentos Para pasar un argumento a un controlador de eventos, use una...
Leer más

firmas digitales integradas en PDFs

 Para las firmas digitales integradas en PDFs, el proceso es un poco diferente al de simplemente manejar archivos y firmas por separado. Aquí te explico en detalle cómo se realiza y cómo el receptor obtiene la clave pública del firmante. Funcionamiento de las Firmas Digitales Integradas en PDFs Firmante : El firmante utiliza un software que soporta firmas digitales en PDF (como Adobe Acrobat, por ejemplo) para firmar el documento PDF. Este software inserta la firma digital en el PDF y también incluye el certificado digital del firmante dentro del archivo PDF. Receptor : El receptor abre el documento PDF utilizando un software compatible con firmas digitales (Adobe Acrobat Reader, por ejemplo). Este software extrae la firma digital y el certificado digital del firmante del PDF. Pasos Detallados Firma del Documento PDF : El documento PDF es firmado utilizando la clave privada del firmante. Se genera un hash del contenido del PDF. El hash es cifrado utilizando la clave privada del fir...
Leer más