编写一个程序以在 ReactJS 中使用上下文将值传递给孩子？

在本文中，我们将看到如何使用上下文将值传递给孩子。

方法：我们将使用上下文 API。这是一种避免深入嵌套组件的方法。如果没有上下文 API，我们将 props 从父组件一直传递到子组件，最后传递到需要它的子组件。上下文 API 删除了子组件中的 prop-drilling，它允许子组件在任何组件中需要数据的地方借助 useContext() 钩子访问数据。它使代码更易读、更精简、更简单。

涉及哪些钩子？

react 中的 Context API 涉及 2 个钩子。

• ReactJS useContext() 钩子
• ReactJS createContext() 钩子

createContext() 钩子负责创建上下文。它表示我们要存储在当前 React 应用程序中的数据。它接受它将保存的数据类型的参数，在下面的示例中，我们使用了 {} 花括号来表示数据将是一个对象。 useContext() 钩子负责消费上下文的数据。它接受一个作为上下文的参数，并允许反应组件访问上下文中可用的数据。

有两种访问数据的方法：

• 对象解构。
• 通过“。”运算符。

我们使用了对象解构，因为它只允许组件中需要的数据。在初始化上下文之后，我们必须用提供者包装父组件，这将允许子组件访问存储在上下文中的数据。它是通过 usercontext（或我们之前初始化的任何其他上下文）的 Provider 属性完成的，并在 Provider 的 value 属性中传递数据。

在 react 中使用 Context API 的步骤：

• 创建一个使用它将保存的数据类型初始化的上下文（在这种情况下它是一个空对象）。
• 向主文件提供上下文，以便子文件能够通过 useContext() 挂钩访问上下文数据。
• 在特定组件中使用所需的上下文属性。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第 3 步：创建 ReactJS 应用程序后，通过以下命令运行开发服务器：

npm start

第四步：在 react app 的 src 文件夹中创建两个文件夹，即 components 和 context，它们将分别存放我们应用的组件和 context。将应用程序分成多个部分而不是将所有文件放在一个文件夹中是一种很好的做法。下面是项目结构的图像。

项目结构：

第 5 步：在 context 文件夹中创建一个UserContext.js文件并添加以下代码。在这里，我们创建了一个类似于 store 的上下文并将其导出，以便需要或想要访问全局数据的组件可以订阅它。另请注意，它是用一个由“{}”表示的空对象初始化的。

UserContext.js

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

现在我们将以自上而下的方式创建文件。

第 6 步：在 components 文件夹中创建一个Component1.js文件和以下代码。现在，我们在 App 组件中添加了一些基本样式，并以对象的形式添加了一些虚拟数据，具有一些属性，如主题、名称、用户 ID 等。现在，为了让子组件订阅或访问全局数据，我们需要使用我们在上一步中创建的上下文提供程序包装父组件，并通过属性“值”传递我们希望子组件访问的数据.

Javascript

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: "[e-mail]",
    contactNumber: "[phone]",
    noOfQuestionsSolved: 120,
    codingStreak: 30,
  };
  
  return (
    
      

        
Context API
        
      
    
  );
}
  
export default App;

第 7 步：使用以下代码在 components 文件夹中创建一个Component1.js文件。它是 App 组件的子组件，并且不要忘记将其添加到 App 组件中，就像在前面的代码中所做的那样。在这里，我们通过导入应用组件应用了样式。现在假设我们只想显示当前登录到我们应用程序的人的姓名。因此，我们可以绕过在 userContext.js 文件中创建的上下文，从 useContext() 挂钩中解构 name 属性。这样，我们就可以订阅全局存储或者上下文。

组件1.js

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 (
    

      

        
Component1
        
Welcome
 
Geek {name} 
      
      

        
        
      
    
  );
};
  
export default Component1;

第 8 步：在 components 文件夹中创建Component2.js文件并添加以下代码。它只是 Component1 的一个子组件，我们希望在其中显示一些数据但不显示用户信息。不要忘记将此组件添加到 Component1 中。

组件2.js

import React from "react";
import Component4 from "./Component4";
import { mainStyle } from "./../App";
  
const Component2 = () => {
  return (
    

      
Component-2
      
Performance status at GeeksForGeeks
      
    
  );
};
  
export default Component2;

步骤 9：在 components 文件夹中创建Component3.js文件并添加以下代码。它只是 Component1 的一个子组件，我们希望在其中显示一些数据但不显示用户信息。不要忘记将此组件添加到 Component1 中。

组件3.js

import React from "react";
import { mainStyle } from "../App";
import Component5 from "./Component5";
  
const Component3 = () => {
  return (
    

      
Component3
      
Geek's personal information
      
    
  );
};
  
export default Component3;

第 10 步：在 components 文件夹中创建Component4.js文件并添加以下代码。它是 Component2 的子组件，我们只想在其中显示一些用户信息。不要忘记将此组件添加到 Component2 中。就像在 Component1 中一样，我们可以通过解构 noOfQuestionsSolved 和 codingStreak 属性来订阅上下文数据。

组件4.js

import React, { useContext } from "react";
import { userContext } from "./../context/UserContext";
  
const Component4 = () => {
  const { noOfQuestionsSolved, codingStreak } = useContext(userContext);
  
  return (
    

      
Component4
      

      Total number of Questions solved 
 
{noOfQuestionsSolved} 
      
      
Coding streak
      
{codingStreak} Days 
    
  );
};
  
export default Component4;

第 11 步：在 components 文件夹中创建Component5.js文件并添加以下代码。它是 Component3 的子组件，我们只想在其中显示一些用户信息。不要忘记将此组件添加到 Component3 中。就像在 Component1 中一样，我们可以通过解构 email 和 contactNumber 属性来订阅上下文数据。

组件5.js

import React, { useContext } from "react";
import { userContext } from "./../context/UserContext";
  
const Component5 = () => {
  const { email, contactNumber } = useContext(userContext);
  
  return (
    

      
Component5
      
Email 
      
{email}
      
Contact Number
 
 {contactNumber} 
    
  );
};
  
export default Component5;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：我们的最终应用程序看起来像这样。

应用结构：