前言
useContext() 是 React Hooks 中的一个用于访问 React 上下文
(Context)的 Hook。它接收一个 React 上下文对象(通常使用 React.createContext 创建),并返回该上下文的当前值。
用法
import React, { createContext, useContext } from 'react';
// 创建Context容器对象:
const MyContext = createContext();
// 渲染子组时,外面包裹xxxContext.Provider, 通过value属性给后代组件传递数据:
function MyProvider(props) {
return <MyContext.Provider value={/*上下文的值*/}>{props.children}</MyContext.Provider>;
}
// 创建一个组件,从上下文中读取值
function MyComponent() {
const myValue = useContext(MyContext);
// ...
}
在上面的例子中,MyProvider 组件作为上下文的提供者,通过value
属性向下传递上下文的值。在 MyComponent 中,我们使用 useContext(MyContext)
来访问该上下文的当前值。这样,即使 MyComponent 不在 MyProvider 的子组件树中,也可以轻松地访问该上下文的值。