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

React中的上下文（Context）是一种在组件层次之间共享数据的方法。它允许我们将一个值传递给子组件，而无需通过逐层传递道具来手动向下传递。

在这里，我们将介绍如何在React中使用上下文将值传递给子组件。

第一步：创建上下文

该 createContext() 函数用于创建上下文。 该函数接收一个默认值参数，该参数表示在未提供Context.Provider时使用的上下文。

import React from 'react';

const MyContext = React.createContext(defaultValue);

在此示例中，我们创建了一个名为MyContext的上下文。

第二步：提供上下文

为了使上下文值可用于子组件，我们需要在父组件中提供上下文值。 我们使用 MyContext.Provider将值作为prop提供。 任何后代组件都可以使用该值。

<MyContext.Provider value={/* 任何JS值 */}>
  {/* 后代组件 */}
</MyContext.Provider>

在这个简单的例子中，我们将对象传递给值属性。

import React from 'react';

const MyContext = React.createContext({ name: 'React' });

function ParentComponent() {
  return (
    <MyContext.Provider value={{ name: 'My Component' }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>{value.name}</div>}
    </MyContext.Consumer>
  );
}

export default ParentComponent;

在这个示例中，我们使用 MyContext.Provider包装了ChildComponent。 Provider的 value属性设置为一个包含name属性的对象，我们期望这个属性将被ChildComponent使用。

第三步：消费上下文

我们可以使用 MyContext.Consumer在任何后代组件中访问上下文的值。 这个Consumer在子组件中是非常重要的。

<MyContext.Consumer>
  {value => /*根据上下文值返回元素 */}
</MyContext.Consumer>

用法如下：

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => <div>{value.name}</div>}
    </MyContext.Consumer>
  );
}

在这个示例中，我们使用 Consumer渲染子组件。 渲染函数作为children属性渲染，该函数将上下文值作为其唯一参数，并使用这个值渲染组件。

此时，ChildComponent将渲染一个包含组件名称的div元素，名称在提供上下文时已指定，而不是使用默认名称“React”。

结论

上下文允许我们在应用程序中的所有组件之间共享数据，而不必按照组件层次结构手动传递它。它可以简化我们的代码并使我们的代码更具可读性和可重用性。