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:
Javascript
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
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA