La palabra «props» es una abreviación de «properties» (propiedades) y denota la información que debe ser usada por algo. En realidad, la utilería puede ser declarada dando el nombre apropiado junto con el valor adecuado que necesitamos pasar.
Para declarar un atrezzo, debemos proporcionar el nombre único junto con los componentes o el elemento, como se muestra a continuación utilizando el archivo index.js .
123456789101112131415161718192021222324252627importarReaccionar,{Componente}de "reaccionar";importar{render }de "reaccionar-dom";importar"./estilo.css";importarDemoComponentede"./DemoComponente";classAppextendsComponente{constructor(){super();esto. state={};}render(){return(<div><DemoComponentname={"Test"}age={25}email={"[email protegido]"}salary={66.5}/[;</div>);}}render(<App/[;document.getElementById("root"));jsx
Aquí en este ejemplo, tenemos un componente hijo en el que vamos a pasar las diferentes propiedades para que el DemoComponente pueda consumirlo, y el código fuente se muestra a continuación.
Nombre, edad, correo electrónico y salario son los nombres independientes de la utilería, y junto con la utilería, hemos proporcionado los valores adecuados. Después de darle los accesorios al componente infantil, necesitamos acceder a ellos.
Para acceder a los accesorios pasados del componente padre, podemos consumirlos fácilmente en el componente hijo, así.
DemoComponent.js
12345678910111213141516171819202122232425262728293031323334importReact,{Componente}de "reaccionar";classDemoComponenteextiendeComponente{constructor(){super();this.state={ nombre: "Reaccionar"};}render(){const{ nombre, edad, email, salario }=esto. El salario es: {salario}</td.
jsx
Puedes ver el archivo DemoComponente, que es nuestro componente infantil, pero una cosa a tener en cuenta es cómo accedimos a los accesorios.
1const{ nombre, edad, email, salario }=esto.props;jsx
De esta manera, cada puntal se almacenará como una constelación, y podremos acceder a ella cuando queramos. Pero tened en cuenta que no podremos cambiarlo porque todos los accesorios son de sólo lectura.
También podemos acceder a los accesorios directamente, así.
123456789101112131415161718192021render(){retorno(www.pfc.com)) La edad}</td.
jsx
Así es como podemos usar los accesorios directamente, usando this.props seguido del nombre específico del accesorio, que es reenviado por el componente padre al componente hijo.
Cómo pasar un objeto como utilería al componente infantil
Acabamos de ver cómo pasar valores separados como accesorios y consumirlos en el componente infantil, pero esto tiene sus límites; por lo tanto, a veces podemos necesitar pasar la matriz o el objeto como accesorios.
El objeto es uno de los términos más usados en JavaScript. Se utiliza para pasar el grupo de claves y pares de valores y consumirlo utilizando los diferentes nombres de las claves.
También podemos pasar el objeto completo al componente infantil como un puntal y podemos consumirlo como lo hacemos con los puntales estáticos estándar.
Abra el archivo index.js y reemplace las siguientes líneas de código fuente.
123456789101112131415161718192021222324252627282930importarReaccionar,{Componente}de "reaccionar";importar{render }de "reaccionar-dom";importar"./estilo.css";importarComponenteNiños1de"./ComponenteNiños1";classAppextendsComponente{constructor(){super();esto. state={ employee:{ empCode: "119", name: "Test employee", age: "25", email:"[email protected]",location: "Hyderabad"}};}render(){return(<div> /* Empleado usado como nombre de utilería */ <ChildComponent1employee={this. state.employee}/{{a6};};}render(<App/{a6};,document.getElementById("root"))jsx
En este ejemplo, hemos creado un objeto directo en el estado. Se llama empleado y se ve así.
1234567empleado:{ empCode: "119", nombre: "Empleado de pruebas", edad: "25", email:"[email protegido]",ubicación: "Hyderabad."}jsx
El objeto contiene las propiedades básicas de un solo empleado, incluyendo el código, el nombre, la edad y otra información que se utiliza en el componente infantil.
Ahora vamos a consumir todo el utillaje del empleado en el componente hijo, crear un nuevo archivo llamado ChildComponent1.js , y pegar las siguientes líneas de código fuente.
1234567891011121314151617181920212223242526272829303132333435363738importReact,{Componente}de "reaccionar";classChildComponent1extiendeComponente{constructor(){super();esto. {empleado.empCode}</td²;²/tr²;²;tr²;td²;Nombre del empleado : {empleado.nombre}</td²;²;/tr²;²;²;td²;Edad del empleado : {empleado.edad}</td²;²;/tr²;²;²;td²;²;Correo electrónico del empleado : {empleado.
jsx
Aquí en este ejemplo, hemos consumido la utilería del empleado, pero la forma en que accedemos a la utilería como objeto es bastante diferente a la utilería normal.
123<tr>td;td;td;Código del empleado : {empleado.empCode}</td;²/tr;html
El empleado de utilería es un objeto que contiene el número de claves diferentes junto con el valor, por lo que si queremos acceder a cualquier clave específica, entonces tenemos que escribir un nombre de objeto junto con la clave para que pueda ser utilizado para renderizar los valores.
De la misma manera, también podemos pasar la matriz como un accesorio, pero la forma de acceder a los accesorios será diferente.
Así es como hemos pasado y consumido los accesorios como un objeto del componente padre al componente hijo, pero también podemos pasar el elemento completo como accesorios al componente hijo, lo cual aprenderemos a continuación.