我無法在 React 的 useContext 掛鈎中訪問 Context Provider

Question

我為菜單欄創建了一個上下文 API，這是我第一次使用它，而且我也在幾天前開始學習的 typescript 中使用它。

App.jsx 中的 Context Creator 和 Provider 代碼

type MenuBar = {
  menu: boolean
  setMenu: any
}

function App() {
  const MenuBarContext = React.createContext<Partial<MenuBar>>({})
  const [menu, setMenu] = useState<boolean>(false)
  return (
    <MenuBarContext.Provider value={{ menu, setMenu }}>
      <div className="h-full font-primary-400">
        <Router>
          <Navbar />
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </Router>
      </div>
    </MenuBarContext.Provider>
  )
}

在 Navbar 組件中使用 UseContext Hook 訪問

const { menu, setMenu } = useContext(MenuBarContext)

我想在上下文 API 中傳遞 state 並在不同的組件中訪問它。 但是使用 useContext 鈎子訪問上下文 API 會給出錯誤 -

Cannot find name 'MenuBarContext'.

Answer 1

在單獨的文件中定義上下文並將其導入到您需要的位置。

菜單欄上下文.ts：

import React from 'react';
// other imports...
const MenuBarContext = React.createContext<Partial<MenuBar>>({});
export default MenuBarContext;

當您需要使用MenuBarContext.Provider或useContext(MenuBarContext)時，像這樣導入它：

import MenuBarContext from './MenuBarContext';