在React中,我正在尝试根据组件中是否传递了prop来设置一个条件类型在函数参数中。
这是一个例子,我有这个组件:
const DatePicker = ({ handleDateChange, value, objectKey, }: { handleDateChange: (value: Dayjs | { [x: string]: Dayjs }) => void; value: Dayjs; objectKey?: string; }) => JSX
我想要做的是,如果"objectKey"作为props传递,那么handleDateChange函数中的"value"参数的类型将是{ [x: string]: Dayjs },否则它将是value: Dayjs。
有人知道如何实现这个吗?
P粉8525780752023-07-19 00:24:54
你可以通过函数重载来实现类似的效果。
// first overload signature function DatePicker({ handleDateChange, value, }: { handleDateChange: (value: Dayjs) => void; value: Dayjs; }): JSX; // second overload signature function DatePicker({ handleDateChange, value, objectKey, }: { handleDateChange: (value: { [x: string]: Dayjs }) => void; value: Dayjs; objectKey?: string; }): JSX; // implementation function DatePicker({ handleDateChange, value, objectKey, }: { handleDateChange: ((value: Dayjs) => void) | ((value: { [x: string]: Dayjs }) => void); value: Dayjs; objectKey?: string; }) { // ... }
使用这种方法,DatePicker只能按照你的定义进行调用,但是实现部分不知道handleDateChange和objectKey之间的关联,因此仍然需要显式处理。
不了解DatePicker的任何细节,我认为最好只使用一个签名,让父组件对DatePicker进行调整,而不是让DatePicker处理来自父组件的特殊情况。