React Props

React Props

 Los accesorios son argumentos que se pasan a los componentes de React.Los accesorios se pasan a los componentes mediante atributos HTML.

props significa propiedades.

Accesorios de reacción

Los React Props son como argumentos de función en JavaScript y atributos en HTML.Para enviar accesorios a un componente, utilice la misma sintaxis que los atributos HTML:

Agregue un atributo de "marca" al elemento Auto:

const myElement = <Car brand="Ford" />;

El componente recibe el argumento como un propsobjeto:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

Ejemplo:

import React from 'react';

import ReactDOM from 'react-dom/client';

function Car(props) {

  return <h2>I am a { props.brand }!</h2>;

}

const myElement = <Car brand="Ford" />;

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

root.render(myElement);

Pasar una Cadena

Los accesorios también son la forma de pasar datos de un componente a otro, como parámetros.

Ejemplo
Envíe la propiedad "marca" del componente Garaje al componente Coche:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand="Ford" />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);



Pasar una Variable

Si tiene una variable para enviar, y no una cadena como en el ejemplo anterior, simplemente coloque el nombre de la variable entre llaves:

Cree una variable llamada carNamey envíela al Carcomponente:

function Car(props) {
  return <h2>I am a { props.brand }!</h2>;
}

function Garage() {
  const carName = "Ford";
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carName } />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);


Pasar un objeto


Cree un objeto llamado carInfoy envíelo al Carcomponente:

function Car(props) {
  return <h2>I am a { props.brand.model }!</h2>;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      <h1>Who lives in my garage?</h1>
      <Car brand={ carInfo } />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);







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