loading...
上次更新: 2023-06-03
useContext 就可以跨元件讀取狀態，不需用 props 一層層傳下去。Context 存放所有狀態，然後在它之下的所有組件都可以存取。state。createContext，在最頂層創建 ContextProvider 包住Provider 的 value 傳入需要傳遞的值import { createContext, useState } from "react";
// 1. 創建 Context
export const ThemeContext = createContext();
export default function App() {
const [darkTheme, setDarkTheme] = useState(false);
return (
// 2. 用 provider 包住
// 3. value 傳入要共用的值
<ThemeContext.Provider value={darkTheme}>
<div className="App">
<Child />
</div>
</ThemeContext.Provider>
);
}
ContextuseContext 來讀取狀態// 1. import context
import { ThemeContext } from "./App";
const Child = (props) => {
// 2. 使用 useContext 來讀取
const darkTheme = useContext(ThemeContext);
return (
<>
...
</>
);
};
export default Child;