知食记
搜索文档…
useContext

基本

1
const value = useContext(MyContext)
Copied!
接收一个 context 对象(React.createContext 的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider>value prop 决定。
当组件上层最近的 <MyContext.Provider> 更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext provider 的 context value 值。
因此调用了 useContext 的组件总会在 context 值变化时重新渲染。
useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>

示例

1
const themes = {
2
light: {
3
foreground: "#000000",
4
background: "#eeeeee"
5
},
6
dark: {
7
foreground: "#ffffff",
8
background: "#222222"
9
}
10
};
11
12
const ThemeContext = React.createContext(themes.light);
13
14
function App() {
15
return (
16
<ThemeContext.Provider value={themes.dark}>
17
<Toolbar />
18
</ThemeContext.Provider>
19
);
20
}
21
22
function Toolbar(props) {
23
return (
24
<div>
25
<ThemedButton />
26
</div>
27
);
28
}
29
30
function ThemedButton() {
31
const theme = useContext(ThemeContext);
32
return (
33
<button style={{ background: theme.background, color: theme.foreground }}>
34
I am styled by theme context!
35
</button>
36
);
37
}
Copied!
复制链接