在React中，我正在嘗試根據(jù)組件中是否傳遞了prop來(lái)設(shè)定一個(gè)條件類型在函數(shù)參數(shù)中。
這是一個(gè)例子，我有這個(gè)元件：
const DatePicker = ({
handleDateChange,
value,
objectKey,
}: {
handleDateChange: (value: Dayjs | { [x: string]: Dayjs }) => void;
value: Dayjs;
objectKey?: string;
}) => JSX
我想要做的是，如果"objectKey"作為props傳遞，那麼handleDateChange函數(shù)中的"value"參數(shù)的類型將是{ [x: string]: Dayjs }，否則它將是value: Dayjs。
有人知道如何實(shí)現(xiàn)這個(gè)嗎？
1
0
0
你可以透過(guò)函數(shù)重載來(lái)達(dá)到類似的效果。
// 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只能按照你的定義進(jìn)行調(diào)用，但實(shí)作部分不知道handleDateChange和objectKey之間的關(guān)聯(lián)，因此仍然需要明確處理。
不了解DatePicker的任何細(xì)節(jié)，我認(rèn)為最好只使用一個(gè)簽名，讓父元件對(duì)DatePicker進(jìn)行調(diào)整，而不是讓DatePicker處理來(lái)自父元件的特殊情況。
