react usecontext具体用法示例
时间: 2023-10-30 09:07:11 浏览: 139
好的,下面是一个简单的示例:
首先,我们需要创建一个 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 钩子。
阅读全文
相关推荐


















