React 中如何提供 (Provide) Context？

推荐答案

在 React 中，可以通过 React.createContext 创建一个 Context 对象，然后使用 Context.Provider 组件来提供 Context。以下是一个简单的示例：

// www.javascriptcn.com code example
import React from 'react';

// 创建一个 Context 对象
const MyContext = React.createContext();

function App() {
  return (
    // 使用 Provider 提供 Context 值
    <MyContext.Provider value="Hello, Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  return (
    // 使用 Consumer 或 useContext 来消费 Context 值
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

export default App;

本题详细解读

1. 创建 Context

首先，使用 React.createContext() 创建一个 Context 对象。这个对象包含两个重要的组件：Provider 和 Consumer。

const MyContext = React.createContext();

2. 使用 Provider 提供 Context

Provider 组件用于向下传递 Context 值。它接受一个 value 属性，这个值可以被所有子组件访问。

<MyContext.Provider value="Hello, Context!">
  <ChildComponent />
</MyContext.Provider>

3. 消费 Context

在子组件中，可以通过 Consumer 组件或 useContext Hook 来消费 Context 值。

使用 Consumer

<MyContext.Consumer>
  {value => <div>{value}</div>}
</MyContext.Consumer>

使用 useContext Hook

import React, { useContext } from 'react';

function ChildComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

4. Context 的默认值

如果在组件树中没有找到匹配的 Provider，React.createContext 可以接受一个默认值作为参数。

const MyContext = React.createContext('Default Value');

5. 动态更新 Context

Provider 的 value 可以是动态的，当 value 发生变化时，所有消费该 Context 的组件都会重新渲染。

<MyContext.Provider value={dynamicValue}>
  <ChildComponent />
</MyContext.Provider>

通过以上步骤，你可以在 React 应用中有效地提供和使用 Context。