首页  >  问答  >  正文

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粉148434742481 天前699

全部回复(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
  • 取消回复