在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處理來自父元件的特殊情況。