我无法访问 React 中使用上下文钩子中的上下文提供程序

Question

我为菜单栏创建了一个上下文API，这是我第一次使用它，而且我也在几天前开始学习的typescript中使用它。

App.jsx中的上下文创建器和提供程序代码

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>
)
}

在导航栏组件中使用UseContext钩子访问

const { menu, setMenu } = useContext(MenuBarContext)

我想在上下文API中传递状态，并在不同的组件中访问它。但是使用useContext钩子访问上下文API会给出错误-

Cannot find name 'MenuBarContext'.

Answer 1

在单独的文件中定义上下文，并在需要的地方导入。

MenuBarContext.ts:

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

当您需要使用MenuBarContext.Provider或useContext(MenuBarContext)时，像这样导入:

import MenuBarContext from './MenuBarContext';