我刚刚开始学习TypeScript,并且一直在开发一个小型的Web应用程序。
由于状态管理,我创建了一个名为CountdownContext.tsx
的文件
import { useState, createContext, useContext, SetStateAction } from "react";
import { CountdownContextType } from "./types";
const CountdownContext = createContext({});
export const useCountdownContext = () => {
return useContext(CountdownContext) as CountdownContextType;
};
// React.useContext(TodoContext) as TodoContextType;
interface Props {
children: React.ReactNode;
}
export const CountdownContextProvider: React.FC<Props> = ({ children }) => {
const [eventDate, setEventDate] = useState<Date>(new Date());
function handleEventDate(e: React.ChangeEvent<HTMLInputElement>) {
setEventDate(new Date(e.target.value));
}
return (
<CountdownContext.Provider value={{ eventDate, handleEventDate }}>
{children}
</CountdownContext.Provider>
);
};
我在下面的文件中导入了eventDate和handleEventDate。
import React, { useState } from "react";
import { useCountdownContext } from "../../contexts/CountdownContext";
type Props = {
activeEdit: boolean;
};
const EventDate: React.FC<Props> = ({ activeEdit }) => {
const { eventDate, handleEventDate } = useCountdownContext();
return (
<div>
{activeEdit ? (
<input type="date" onChange={(e) => handleEventDate(e.target.value, typeof new Date(e.target.value))} />
) : (
<div>{eventDate}</div>
)}
</div>
);
};
export default EventDate;
但是,我在导入时遇到了一个错误,在搜索了有关问题发生的情况后,我发现我需要声明类型。
然后我创建了一个文件
export type CountdownContextType = {
eventDate: Date;
handleEventDate: (e: React.ChangeEvent<HTMLInputElement>) => void;
};
但是,有一个问题是,我以为我已经在上下文文件中为eventDate和handleEventDate提供并声明了类型。
因此,我想问为什么我要做两次?
请给予我澄清一下这个问题。谢谢你的好意和帮助。
1条答案
按热度按时间yvgpqqbh1#
不使用类型的一种方法是为上下文创建初始值,如下所示:
该准则的灵感主要来自:https://youtu.be/P95DuIBwnqw?t=822
下面是链接的源代码:https://github.com/jherr/which-react-state-manager/blob/main/examples/hooks-context/src/store.tsx