¿Escriba un programa para pasar valores al niño usando contexto en ReactJS?

En este artículo, veremos cómo pasar valores a niños usando contexto. 

Enfoque: Usaremos la API de contexto. Es un método para evitar la perforación puntal en componentes profundamente anidados. Sin la API de contexto, pasamos accesorios desde el componente principal hasta los subcomponentes y, finalmente, al componente secundario, donde se requiere. La API de contexto elimina la perforación de accesorios en los subcomponentes y permite que el componente secundario acceda a la parte de los datos con la ayuda del gancho useContext() donde sea que se requieran los datos en cualquier componente. Hace que el código sea mucho más legible, más ágil y menos complejo.

¿Qué ganchos están involucrados?

La API de contexto en reaccionar involucró 2 ganchos.

• Enganches ReactJS useContext()
• Ganchos ReactJS createContext()

El gancho createContext() es responsable de crear un contexto. Representa los datos que queremos almacenar en la aplicación de reacción actual. Toma un parámetro del tipo de datos que contendrá, a continuación, en el ejemplo, hemos usado {} llaves para indicar que los datos serán un objeto. El gancho useContext() es responsable de consumir los datos de contexto. Toma un parámetro que es un contexto y permite que el componente de reacción acceda a los datos que están disponibles en el contexto.

Hay dos métodos para acceder a los datos:

• Desestructuración de objetos.
• Mediante el ‘.’ operador.

Hemos utilizado la desestructuración de objetos, ya que permite que solo los datos necesarios estén en el componente. Después de inicializar el contexto, tenemos que envolver el componente principal con un proveedor que permitirá que los componentes secundarios accedan a los datos que se almacenan en el contexto. Se realiza a través de la propiedad Provider del contexto de usuario (o cualquier otro contexto que hayamos inicializado previamente) y pasa el dato en la propiedad value de Provider.

Pasos para usar la API de contexto en reaccionar:

• Cree un contexto que se inicialice con el tipo de datos que contendrá (es un objeto vacío en este caso).
• Proporcione el contexto al archivo principal, para que los niños puedan acceder a los datos de contexto a través del gancho useContext().
• Use las propiedades requeridas del contexto en componentes específicos.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: después de crear la aplicación ReactJS, ejecute el servidor de desarrollo con el siguiente comando:

npm start

Paso 4: cree dos carpetas en la carpeta src de la aplicación de reacción, es decir, componentes y contexto, almacenarán los componentes de nuestra aplicación y el contexto respectivamente. Es una buena práctica dividir la aplicación en secciones y no solo poner todos los archivos en una carpeta. A continuación se muestra la imagen de la estructura del proyecto.

Estructura del proyecto:

Paso 5: Cree un archivo UserContext.js en la carpeta de contexto y agregue el siguiente código. Aquí estamos creando un contexto que es similar a una tienda y lo exportamos para que los componentes que requieren o quieran acceder a los datos globales puedan suscribirse a él. También tenga en cuenta que se inicializa con un objeto vacío indicado por ‘{}’.

import { createContext } from "react";
export const userContext = createContext({});

Ahora crearemos los archivos de arriba a abajo.

Paso 6: Cree un archivo Component1.js en la carpeta de componentes y el siguiente código. Ahora aquí hemos agregado algunos estilos básicos en el componente de la aplicación y tenemos algunos datos ficticios en forma de un objeto con algunas propiedades como tema, nombre, ID de usuario, etc. Ahora, para que los componentes secundarios se suscriban u obtengan acceso a los datos globales, necesitamos envolver el componente principal con el proveedor de contexto que creamos en el paso anterior y pasar los datos a los que queremos que accedan los componentes secundarios mediante la propiedad ‘valor’ .

import "./App.css";
import Component1 from "./components/Component1";
import { userContext } from "./context/UserContext";
  
export const mainStyle = {
  backgroundColor: "#4E9F3D",
  padding: "10px",
  borderRadius: "10px",
  boxShadow:
    "rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px",
  width: "200px",
  margin: "auto",
};
  
function App() {
  let data = {
    theme: "light",
    name: "Aman",
    userId: "aox01",
    email: "aman1@gmail.com",
    contactNumber: "+91 9898987231",
    noOfQuestionsSolved: 120,
    codingStreak: 30,
  };
  
  return (
    <userContext.Provider value={data}>
      <div className="App">
        <h2>Context API</h2>
        <Component1 />
      </div>
    </userContext.Provider>
  );
}
  
export default App;

Paso 7: Cree un archivo Component1.js en la carpeta de componentes con el siguiente código. Es un componente secundario del componente de la aplicación y no se olvida de agregarlo al componente de la aplicación como se hizo en el código anterior. Aquí hemos aplicado los estilos del componente App al importarlo. Ahora supongamos que solo queremos mostrar el nombre de la persona que actualmente inició sesión en nuestra aplicación. Por lo tanto, podemos desestructurar la propiedad de nombre del enlace useContext() sin pasar por el contexto creado en el archivo userContext.js. De esta forma, podemos suscribirnos a la tienda global o al contexto.

import React, { useContext } from "react";
import Component2 from "./Component2";
import Component3 from "./Component3";
import { mainStyle } from "./../App";
import { userContext } from "./../context/UserContext";
  
const Component1 = () => {
  const { name } = useContext(userContext);
  return (
    <div>
      <div style={mainStyle}>
        <h2>Component1</h2>
        <h3>Welcome</h3> <h3>Geek {name} </h3>
      </div>
      <div style={{ display: "flex", justifyContent: "space-around" }}>
        <Component2 />
        <Component3 />
      </div>
    </div>
  );
};
  
export default Component1;

Paso 8: Cree el archivo Component2.js en la carpeta de componentes y agregue el siguiente código. Es solo un componente secundario de Component1 y donde queremos mostrar algunos datos pero no información del usuario. No olvide agregar este componente en Component1.

import React from "react";
import Component4 from "./Component4";
import { mainStyle } from "./../App";
  
const Component2 = () => {
  return (
    <div style={mainStyle}>
      <h2>Component-2</h2>
      <p>Performance status at GeeksForGeeks</p>
      <Component4 />
    </div>
  );
};
  
export default Component2;

Paso 9: Cree el archivo Component3.js en la carpeta de componentes y agregue el siguiente código. Es solo un componente secundario de Component1 y donde queremos mostrar algunos datos pero no información del usuario. No olvide agregar este componente en Component1.

import React from "react";
import { mainStyle } from "../App";
import Component5 from "./Component5";
  
const Component3 = () => {
  return (
    <div style={mainStyle}>
      <h2>Component3</h2>
      <p>Geek's personal information</p>
      <Component5 />
    </div>
  );
};
  
export default Component3;

Paso 10: Cree el archivo Component4.js en la carpeta de componentes y agregue el siguiente código. Es un componente secundario de Component2 y donde queremos mostrar solo información del usuario. No olvide agregar este componente en Component2. Al igual que en Component1, podemos suscribirnos a los datos de contexto desestructurando las propiedades noOfQuestionsSolved y codingStreak.

import React, { useContext } from "react";
import { userContext } from "./../context/UserContext";
  
const Component4 = () => {
  const { noOfQuestionsSolved, codingStreak } = useContext(userContext);
  
  return (
    <div>
      <h2>Component4</h2>
      <h3>
      Total number of Questions solved </h3> <h3>{noOfQuestionsSolved} 
      </h3>
      <h3>Coding streak</h3>
      <h3>{codingStreak} Days </h3>
    </div>
  );
};
  
export default Component4;

Paso 11: Cree el archivo Component5.js en la carpeta de componentes y agregue el siguiente código. Es un componente secundario de Component3 y donde queremos mostrar solo información del usuario. No olvide agregar este componente en Component3. Al igual que en Component1, podemos suscribirnos a los datos de contexto desestructurando las propiedades email y contactNumber.

import React, { useContext } from "react";
import { userContext } from "./../context/UserContext";
  
const Component5 = () => {
  const { email, contactNumber } = useContext(userContext);
  
  return (
    <div>
      <h2>Component5</h2>
      <h3>Email </h3>
      <h3>{email}</h3>
      <h3>Contact Number</h3> <h3> {contactNumber} </h3>
    </div>
  );
};
  
export default Component5;

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

npm start

Salida: Nuestra aplicación final se verá así.

Estructura de la aplicación: