React和TypeScript - 如果props存在,则使用条件参数类型
P粉148434742
P粉148434742 2023-07-18 20:17:03
0
1
713

在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粉148434742
P粉148434742

全部回复(1)
P粉852578075

你可以通过函数重载来实现类似的效果。

// 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处理来自父组件的特殊情况。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板