¿Cómo pasar la propiedad de los accesorios de un componente principal a un componente secundario?

En este artículo, aprenderemos cómo pasar la propiedad del componente principal al componente secundario en React js. Al incorporar el componente secundario dentro del componente principal en React, los desarrolladores deben enviar propiedades o datos al componente secundario desde el componente principal. 

React.js nos permite usar props (forma abreviada de propiedad) para pasar datos del componente principal al componente secundario. Tenemos que establecer el valor de accesorios dentro del componente secundario, mientras lo incrustamos en el componente principal.

Requisitos previos: Los requisitos previos para este tutorial son:

• reaccionar conocimiento
• Componentes de clase
• Componentes funcionales

Creación de la aplicación: el siguiente comando lo ayudará a iniciar una nueva aplicación de reacción .

npx create-react-app testapp

A continuación, debe pasar a la carpeta del proyecto ‘ testapp ‘ desde la terminal.

cd testapp

Cree una nueva carpeta de componentes dentro de la carpeta src y cree un componente llamado child.js dentro de la carpeta de componentes.

Directorio del proyecto: Debería verse así.

Pasar propiedades del componente principal al secundario usando componentes de clase

Cuando los usuarios pasan los datos de padre a hijo usando los componentes de clase, pueden acceder dentro del componente hijo usando ‘ this.props.property_name ‘. 

Pasos:

1. Incruste el componente secundario en el componente principal.
2. Pase la variable de datos (accesorios) con un valor asignado al componente secundario como argumento mientras lo incrusta en el componente principal.
3. Si un usuario quiere pasar múltiples variables de datos (accesorios), todos los nombres de variables deben ser únicos.
4. En el componente secundario, acceda al valor de la variable de datos mediante ‘this.props.variable_name’.

Ejemplo: 

Nombre de archivo: App.js En este archivo, incrustaremos el componente secundario en el componente principal. Además, pasamos múltiples accesorios al componente secundario.

import React, { Component } from 'react';
import Child from './components/child.js';
 
// Child component embedded to parent component
// with props value
class App extends Component {
  render() {
    return (
      <div>
        <h1>This is a parent component</h1>
        <ul>
         <li>
          <Child gfgcolor="green" usercolor="blue"/>
         </li>
        </ul>
      </div>
    );
  }
}
  
export default App;

 
Nombre de archivo: Child.js En el archivo child.js, accederemos a los accesorios del componente principal y los representaremos dentro del componente secundario. 

import React, { Component } from 'react';
 
// Accessing the props value using this.props
class Child extends Component {
  render() {
    return (
      <div>
        <h1>This is a child component</h1>
        <h1 style={{color: this.props.gfgcolor}}>
          GeeksForGeeks
        </h1>
        <h1 style={{color: this.props.usercolor}}>
          hello user
        </h1> 
      </div>
    );
  }
}
  
export default Child;

 
Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción: 

En la imagen de salida anterior, el usuario puede ver que el color de los elementos HTML cambia según el valor de los accesorios.

Pasar propiedades del componente principal al secundario usando componentes funcionales

Para acceder a las propiedades de padre a hijo usando un componente funcional, los usuarios no necesitan usar ‘ this.props ‘ como componentes de clase. Los usuarios pueden acceder al valor de los accesorios escribiendo solo los nombres de las variables.

Pasos: 

1. Incruste el componente secundario en el componente principal.
2. Pase los accesorios al componente secundario como un argumento mientras lo incrusta en el componente principal.
3. En el componente secundario, acceda al valor de la variable de datos escribiendo solo el nombre o la variable.

Ejemplo: 

Nombre de archivo: App.js En App.js, agregaremos un componente funcional y llamaremos a un componente secundario con accesorios y su valor. 

import React, { Component } from 'react';
import Child from './components/child.js';
 
// parent component
// embedding child component inside it
function App (){
  return(
    <div>
    <h1>This is a parent component</h1>
    <ul><li>
  <Child gfgcolor="green" usercolor="blue"/></li>
  </ul>
  </div>
  )
}

 
Nombre de archivo: child.js En child.js, agregaremos accesorios como parámetro de un componente funcional y los usaremos dentro del componente.

import React, { Component } from 'react';
 
// Passing props as a parameter
// inside the child component
function Child ({gfgcolor,usercolor}){
  return(
      <div>
        <h1>This is a child component</h1>
        <h1 style={{color: gfgcolor}}>GeeksForGeeks</h1>
        <h1 style={{color: usercolor}}>hello user</h1> 
      </div>
  )
}

 
Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando. 

npm start

Producción: