[我正在尝试使用useContext挂钩将状态和setState传递给子组件,但是当我尝试在提供程序的value参数中传递[state,setState]时遇到了ts错误。我的代码如下:
export interface IProviderProps {
children?: any;
}
const initialState = {
state: Object,
setState: () => {},
};
export const AppContext = createContext(initialState);
export const AppProvider = (props: IProviderProps) => {
const [state, setState] = useState([{ isMenuOpen: false, isSideOpen: false }]);
return <AppContext.Provider value={[state, setState]}>{props.children}</AppContext.Provider>;
};
我正在设置的initialState
的值变量上出现错误。
index.d.ts(290, 9): The expected type comes from property 'value' which is declared here on type 'IntrinsicAttributes & ProviderProps<{ state: ObjectConstructor; setState: () => void; }>'
如何设置初始状态以允许我传递状态和useState变量?
下面是如何使用TypeScript和hooks创建React的示例。
请参阅React - Context了解更多信息。
// Dependencies.
import React, {createContext, useState, SetStateAction, Dispatch} from 'react'
// App Context.
interface AppContext {
// Data.
menuIsOpen: boolean
sideIsOpen: boolean
// Functions.
setMenuIsOpen: Dispatch<SetStateAction<boolean>>
setSideIsOpen: Dispatch<SetStateAction<boolean>>
}
// Context.
export const Context = createContext<AppContext>({
// Data.
menuIsOpen: false,
sideIsOpen: false,
// Functions.
setMenuIsOpen: open => {},
setSideIsOpen: open => {}
})
// App Provider
export const AppProvider: React.FC<{}> = props => {
// State.
const [menuIsOpen, setMenuIsOpen] = useState(false)
const [sideIsOpen, setSideIsOpen] = useState(false)
// Data.
const data = {menuIsOpen, sideIsOpen}
// Functions.
const functions = {setMenuIsOpen, setSideIsOpen}
// Value.
const value = {...data, ...functions}
// ..
return <Context.Provider value={value}>{props.children}</Context.Provider>
}