搜尋

首頁  >  問答  >  主體

React和TypeScript - 如果props存在,則使用條件參數類型

在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粉148434742P粉148434742496 天前714

全部回覆(1)我來回復

  • P粉852578075

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

    回覆
    0
  • 取消回覆