reactjs 使用TypeScript的React Context提供程序

jvlzgdj9  于 2023-04-11  发布在  React
关注(0)|答案(1)|浏览(187)

我是React上下文和TypeScript的新手,我正在尝试编写上下文来打开和关闭侧边栏。

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,所以侧边栏显示,当我从上下文提供程序手动更改时,它会关闭侧边栏,但这里的问题是setter函数“setActiveMenu”根本不起作用。正如我所说的,我对react上下文和typescript都是新手,在我的控制台中没有显示错误,我也不知道为什么会这样

pwuypxnk

pwuypxnk1#

你没有在任何地方存储你的状态,你的上下文需要一些支持。

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

    return (
        <StateContext.Provider value={{ activeMenu, setActiveMenu }}>
            {children}
        </StateContext.Provider>
    )
}

相关问题