我们如何在 React.CreateContext 中使用泛型?
我有这个:
interface Props {
}
export interface SearchContextProps {
dtos: any[];
}
export const SearchContext = React.createContext<SearchContextProps>({
dtos: []
});
const SearchPage: React.FunctionComponent<Props> = (props) => {
const [dtos, setDtos] = React.useState<any[]>([]);
const searchContext = {
dtos: dtos
};
return (
<SearchContext.Provider value={searchContext}>
...
</SearchContext.Provider>
);
}
export default SearchPage;
现在我想使用泛型,所以我会写一些类似的东西:
interface Props<T> {
}
export interface SearchContextProps<T> {
dtos: T[];
}
export const SearchContext = React.createContext<SearchContextProps<T>>({
dtos: []
});
const SearchPage = <T extends object>(props: Props<T>) => {
const [dtos, setDtos] = React.useState<T[]>([]);
const searchContext = {
dtos: dtos
};
return (
<SearchContext.Provider value={searchContext}>
...
</SearchContext.Provider>
);
}
export default SearchPage;
但我想知道如何开始工作:
export const SearchContext = React.createContext<SearchContextProps<T>>({
我如何在这里使用泛型,我如何才能访问 T?
我试图在组件内移动上下文:
interface Props<T> {
}
export interface SearchContextProps<T> {
dtos: T[];
}
const SearchPage = <T extends object>(props: Props<T>) => {
const [dtos, setDtos] = React.useState<T[]>([]);
const SearchContext = React.createContext<SearchContextProps<T>>({
dtos: [],
});
const searchContext = {
dtos: dtos,
};
return (
<SearchContext.Provider value={searchContext}>
...
</SearchContext.Provider>
);
}
export default SearchPage;
但现在我不知道如何导出它。
有什么帮助吗?
最佳答案
我也一直在尝试解决这个问题,终于用我正在构建的向导完成了 atm。
提供者部分与您的相似:
import React, { Dispatch, SetStateAction } from "react";
export interface IWizardContext<T> {
formData: T;
setFormData: Dispatch<SetStateAction<T>>;
}
export const WizardContext = React.createContext<IWizardContext<any>>({
formData: {},
setFormData: () => {},
});
const WizardProvider: React.FC = (props) => {
const [formData, setFormData] = React.useState<any>({});
return (
<WizardContext.Provider
value={{
formData: formData,
setFormData: setFormData,
}}
>
{props.children}
</WizardContext.Provider>
);
};
export default WizardProvider;
export function withWizardProvider<TProps = {}>(component: React.FC<TProps>) {
const Component = component;
return ((props: TProps) => {
return (
<WizardProvider>
<Component {...props} />
</WizardProvider>
);
}) as React.FC<TProps>;
}
而消费者:import React from "react";
import {
IWizardContext,
withWizardProvider,
WizardContext,
} from "./WizardProvider";
interface ISampleWizardState {
name?: string;
lastName?: string;
}
const SampleWizard: React.FC = (props) => {
const wizard = React.useContext<IWizardContext<ISampleWizardState>>(
WizardContext
);
return (
<div
style={{
display: "flex",
justifyContent: "flex-start",
flexDirection: "column",
}}
>
<span>{`${wizard.formData.name || "John"} ${
wizard.formData.lastName || "Doe"
}`}</span>
<input
type="text"
name="name"
value={wizard.formData.name}
onChange={(e) => {
const text = e?.target?.value;
wizard.setFormData((prev) => ({
...prev,
name: text,
}));
}}
/>
<input
type="text"
name="lastName"
value={wizard.formData.lastName}
onChange={(e) => {
const text = e?.target?.value;
wizard.setFormData((prev) => ({
...prev,
lastName: text,
}));
}}
/>
</div>
);
};
export default withWizardProvider(SampleWizard);
所以消费者的主要事情是在 useContext 中定义你的 T :React.useContext<IWizardContext<ISampleWizardState>>(WizardContext);
关于reactjs - 用泛型 react 上下文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60725621/