我无法在 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';