ReactJS Props Referencia completa – Part 1

React nos permite pasar información a un Componente (de un componente principal a un componente secundario) usando algo llamado props (abreviatura de propiedades). Props es básicamente un objeto que está disponible para todos los componentes de React. Los accesorios son de solo lectura y no pueden ser modificados por el componente al que pertenecen. 

Pasar y acceder a accesorios: podemos pasar accesorios a cualquier componente cuando declaramos atributos para cualquier etiqueta HTML. Echa un vistazo al siguiente fragmento de código:

<Welcome fullName = "Harsh Agarwal" />

En el fragmento de código anterior, estamos pasando un accesorio llamado fullName al componente llamado Welcome. Este accesorio tiene el valor «Harsh Agarwal» . Veamos ahora cómo podemos acceder a este prop (propiedad).

Para un componente React, el objeto props almacenará la propiedad como clave: pares de valores y se verá como se muestra a continuación. fullName es la clave y «John Wick» es el valor.

props = { fullName: "Harsh Agarwal" }

En el caso de componentes funcionales, podemos acceder a un valor prop como se muestra a continuación.

props.propName;

Ejemplo:

import React from "react";
import ReactDOM from "react-dom";
 
/* Below given code will create a functional component called Welcome.
   This component takes one prop called fullName and displays a welcome message
   to the user. */
 
function Welcome(props) {
  return (
    <div>
      <h1>Hello {props.fullName}</h1>
      <h2>Welcome to GeeksforGeeks</h2>
    </div>
  );
}
 
/* Below given code will render the HTML returned by the
   Welcome component inside the HTML element for which
   the id is "root" */
 
ReactDOM.render(
  <Welcome fullName="Harsh Agarwal" />,
  document.getElementById("root")
);

Producción:

 

La lista completa de accesorios se enumeran a continuación:

• ReactJS | Métodos como accesorios
• ReactJS | Tipos de propiedad
• ReactJS | Accesorios – Conjunto 1
• ReactJS | Accesorios – Conjunto 2
• Flujo de datos unidireccional
• ReactJS | Estado en reaccionar
• ReactJS | Estado vs accesorios
• ReactJS | Estado de implementación y ciclo de vida