reactjs - 在打字稿中使用带有反应钩子的反应上下文
问题描述
下面的代码演示了我如何尝试使用反应钩子实现反应的上下文,这里的想法是我将能够轻松地从任何子组件访问上下文
const {authState, authActions} = useContext(AuthCtx);
首先,我创建了一个导出上下文和提供程序的文件。
import * as React from 'react';
const { createContext, useState } = React;
const initialState = {
email: '',
password: ''
};
const AuthCtx = createContext(initialState);
export function AuthProvider({ children }) {
function setEmail(email: string) {
setState({...state, email});
}
function setPassword(password: string) {
setState({...state, password});
}
const [state, setState] = useState(initialState);
const actions = {
setEmail,
setPassword
};
return (
<AuthCtx.Provider value={{ authState: state, authActions: actions }}>
{children}
</AuthCtx.Provider>
);
}
export default AuthCtx;
这可行,但我在value
提供者下方出现错误,可能是因为我在其中添加了操作,因此问题是,有没有办法让我保留所有类型的内容并仍然能够导出上下文和提供者?
我相信我也不能createContext
放入我的主要功能,因为它会一直重新创建它?
[ts] 类型 '{ authState: { email: string; 密码:字符串;}; authActions: { setEmail: (email: string) => void; 设置密码:(密码:字符串)=> 无效;}; }' 不可分配给类型 '{ email: string; 密码:字符串;}'。对象字面量只能指定已知属性,并且 'authState' 不存在于类型 '{ email: string; 密码:字符串;}'。[2322] index.d.ts(266, 9):预期类型来自属性“值”,该属性在此处声明类型为“IntrinsicAttributes & ProviderProps<{ email: string; 密码:字符串;}>' (property) authState: { email: string; 密码:字符串;}
解决方案
上面的答案有效,因为严格的类型检查规则被禁用。具有严格规则的上下文示例:
import { createContext, Dispatch, SetStateAction, useState } from 'react';
import { Theme } from '@styles/enums';
import { Language } from '@common/enums';
type Props = {
children: React.ReactNode;
};
type Context = {
appLang: string;
appTheme: string;
setContext: Dispatch<SetStateAction<Context>>;
};
const initialContext: Context = {
appLang: Language.EN,
appTheme: Theme.DEFAULT,
setContext: (): void => {
throw new Error('setContext function must be overridden');
},
};
const AppContext = createContext<Context>(initialContext);
const AppContextProvider = ({ children }: Props): JSX.Element => {
const [contextState, setContext] = useState<Context>(initialContext);
return (
<AppContext.Provider value={{ ...contextState, setContext }}>
{children}
</AppContext.Provider>
);
};
export { AppContext, AppContextProvider };
这个对我有用。它只是枚举,如下所示Theme
:Language
export enum Theme {
DEFAULT = 'DEFAULT',
BLACK = 'BLACK',
}
setContext
如果程序员initialContext
没有setContext
在Provider
. 你可以使用
setContext: (): void => {}
祝你好运!
推荐阅读
- performance - 我应该使用 JMeter 还是 Selenium 来进行 Web 应用程序的负载和性能测试?
- python - 用python构建一个简单的数独打印
- swift - SwiftUI UIViewRepresentable 中的“无法推断通用参数”
- python - 从函数返回值到变量
- javascript - 循环中的 Ajax 调用:Ajax 请求被取消,除了最后一个
- laravel - 更新 laravel API 中的移动应用程序配置文件
- javascript - 创建 2 个按钮,从 2 个不同方向显示内容
- powershell - 检查仅包含单个 0 值的文本文件
- bash - AWK 过滤输出
- c++ - 调用未识别类型的类的方法