首页  >  问答  >  正文

使用TypeScript编写的React Context提供者

我是 React context 和 TypeScript 的新手,我正在尝试编写 context 来打开和关闭侧边栏。这是我的代码

import React, { createContext, useContext, ReactNode, SetStateAction, Dispatch } from "react";



interface StateContextType {
    activeMenu: boolean
    setActiveMenu: Dispatch<SetStateAction<boolean>>;
}

export const StateContext = createContext<StateContextType>({
    activeMenu: true,
    setActiveMenu: () => {}
});



type ContextProviderProps = {
    children?: ReactNode
}

export const ContextProvider = ({ children }: ContextProviderProps) => {
    
    return (
        <StateContext.Provider
            value={{ activeMenu: true, setActiveMenu: () => { } }}
        >
            {children}
        </StateContext.Provider>
    )
}

export const useStateContext = () => useContext(StateContext)

当我尝试在应用程序中使用上下文时,布尔值“activeMenu”工作正常,这意味着侧边栏根据其值显示。因为我将其默认值设置为 true,所以会显示侧边栏,当我从上下文提供程序手动更改它时,它会关闭侧边栏,但这里的问题是设置器函数“setActiveMenu”根本不起作用。正如我所说,我对反应上下文和打字稿都是新手,我的控制台中没有显示错误,而且我不知道为什么会发生这种情况。

P粉714780768P粉714780768227 天前418

全部回复(1)我来回复

  • P粉727531237

    P粉7275312372024-03-29 16:09:43

    您不会将您的状态存储在任何地方,并且您的上下文需要一些支持。尝试一下

    export const ContextProvider = ({ children }: ContextProviderProps) => {
        const [activeMenu, setActiveMenu] = useState(true);
    
        return (
            
                {children}
            
        )
    }

    回复
    0
  • 取消回复