react usecontext具体用法示例

好的，下面是一个简单的示例：

首先，我们需要创建一个 Context 对象，可以在任何地方访问它。例如：

import React from "react";

const ThemeContext = React.createContext("light");

export default ThemeContext;

在这个例子中，我们创建了一个名为 ThemeContext 的 Context 对象，并将其默认值设置为 "light"。

接下来，我们需要在应用程序中的某个地方提供所创建的 Context 对象。例如：

import React from "react";
import ThemeContext from "./ThemeContext";

function App() {
  return (
    <ThemeContext.Provider value="dark">
      { /* 在这里渲染子组件 */ }
    </ThemeContext.Provider>
  );
}

export default App;

在这个例子中，我们在 App 组件中提供了 ThemeContext.Provider，并将其值设置为 "dark"。这意味着在主题上下文中，所有子组件都可以访问到的值为 "dark"。

现在我们可以在应用程序中的任何地方消费 ThemeContext。例如：

import React, { useContext } from "react";
import ThemeContext from "./ThemeContext";

function MyComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div className={`my-component ${theme}`}>
      { /* 渲染组件内容 */ }
    </div>
  );
}

export default MyComponent;

在这个例子中，我们使用 useContext 钩子从主题上下文中获取当前主题的值，并将其应用于组件的类名中。

这就是使用 useContext 钩子的基本流程。当然，在实际应用中可能会有更复杂的用法，但是这个示例应该足以让你理解如何使用 useContext 钩子。