props

 Accesorios

Las propiedades son argumentos que se pasan a los componentes de React.

Los accesorios se pasan a los componentes a través de atributos HTML.

props significa propiedades.

Un componente es una pieza de lógica encapsulada. Por ejemplo, aquí hay un componente que muestra un Hello, World!mensaje:

function HelloWorld() {

  return <span>Hello, World!</span>;

}

El problema con <HelloWorld />el componente es que no es flexible. No se puede cambiar la persona que saluda, por ejemplo, usar Jokeren lugar de Earth.

Puedes resolver este problema utilizando el concepto de propiedades del componente .

Hagamos que el <HelloWorld />componente sea más flexible agregando una propiedad who que who permita personalizar a la persona que se está saludando. Nombremos el nuevo componente <Hello>.

Hay 2 pasos para agregar la who propiedad al <Message>componente:

1) Haz que la función de tu componente lea las propiedades del propsparámetro :

function Hello(props) {

  return <div>Hello, {props.who}!</div>;

}

Ahora Hello la función tiene un parámetro props. Al renderizar el componente, React se asegurará de asignar al props objeto todas las propiedades que le asigne al componente.

2) Al renderizar el componente, agregue la propiedad al componente usando la sintaxis similar a un atributo who="Earth":

// Render

<Hello who="Earth" />

// Output

<div>Hello, Earth!</div>

Los componentes se pueden pasar como props, que representa propiedades. Los accesorios son como argumentos de función y se envían al componente como atributos.

Aprenderás más sobre esto props en el próximo capítulo.

Ejemplo

Utilice un atributo para pasar un color al componente Car y utilícelo en la función render():

function Car(props) {

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

}

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

root.render(<Car color="red"/>);

Accesorios de React

Las propiedades de React son como argumentos de función en JavaScript y atributos en HTML.

Para enviar propiedades a un componente, utilice la misma sintaxis que los atributos HTML:

Agregue un atributo "marca" al elemento Auto:

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

El componente recibe el argumento como un propsobjeto:

Utilice el atributo de marca en el componente:

function Car(props) {

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

}

Pasar datos

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

Envía 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 />);

Si tienes una variable para enviar, y no una cadena como en el ejemplo anterior, simplemente coloca el nombre de la variable dentro de llaves:

Crea una variable llamada carNamey envíala 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 />);

O si fuera un objeto:

Crea un objeto llamado carInfoy envíalo 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 />);

Nota: Las propiedades de React son de solo lectura. Recibirás un error si intentas cambiar su valor.