我正在尝试使用React学习TypeScript,并且我正在努力使用React Context和TypeScript。下面有一个Context,我正在尝试将其转换为TypeScript,我设法为菜单创建上下文,并且它工作正常。这就是它。
import { createContext, useContext, ReactNode, SetStateAction, Dispatch, useState } from "react";
// define the type for createContext
interface MenuStateContextType {
activeMenu: boolean
setActiveMenu: Dispatch<SetStateAction<boolean>>;
}
// create and initialize createContext with a default value
export const MenuStateContext = createContext<MenuStateContextType>({
activeMenu: true,
setActiveMenu: () => { }
});
// define react's "children" prop type
type ContextProviderProps = {
children?: ReactNode
}
export const ContextProvider = ({ children }: ContextProviderProps) => {
const [activeMenu, setActiveMenu] = useState(true);
return (
<MenuStateContext.Provider
value={{
activeMenu,
setActiveMenu,
}}
>
{children}
</MenuStateContext.Provider>
)
}
// passing the MenustateContext to useContext() in order to use in the app
export const useMenuStateContext = () => useContext(MenuStateContext)
但是我正在努力实现initialState代码。如果有人能帮我把这个JSX代码转换成TSX,我将非常感激。
import React, { createContext, useContext, useState } from 'react';
const StateContext = createContext();
const initialState = {
chat: false,
cart: false,
userProfile: false,
notification: false,
};
export const ContextProvider = ({ children }) => {
const [screenSize, setScreenSize] = useState(undefined);
const [currentColor, setCurrentColor] = useState('#03C9D7');
const [currentMode, setCurrentMode] = useState('Light');
const [themeSettings, setThemeSettings] = useState(false);
const [activeMenu, setActiveMenu] = useState(true);
const [isClicked, setIsClicked] = useState(initialState);
const setMode = (e) => {
setCurrentMode(e.target.value);
localStorage.setItem('themeMode', e.target.value);
};
const setColor = (color) => {
setCurrentColor(color);
localStorage.setItem('colorMode', color);
};
const handleClick = (clicked) => setIsClicked({ ...initialState, [clicked]: true });
return (
// eslint-disable-next-line react/jsx-no-constructed-context-values
<StateContext.Provider value={{ currentColor, currentMode, activeMenu, screenSize, setScreenSize, handleClick, isClicked, initialState, setIsClicked, setActiveMenu, setCurrentColor, setCurrentMode, setMode, setColor, themeSettings, setThemeSettings }}>
{children}
</StateContext.Provider>
);
};
export const useStateContext = () => useContext(StateContext);
1条答案
按热度按时间h43kikqp1#
必须为createContext函数提供initialState,并且必须提供类型。