reactjs 如何为依赖于其他属性值的typescript接口属性设置2个不同的值？

egmofgnx 于 2023-04-29 发布在 React

关注(0)|答案(1)|浏览(138)

我有这个吐司组件与2不同的大小。如果用户将smallSize设置为true，则duration值应为4000|五千|6000。如果不小，则duration值应为6000|七千|8000。通过这样做，我可以限制消费者只选择某些数字，这取决于他们是否选择了smallSize。但我怎么才能做到呢？现在，我只是包括了持续时间中所有可能的数字，但这不是理想的方法。

interface IToast {
  id: string;
  open: boolean;
  smallSize?: boolean;
  title?: string;
  content: string;
  duration?: 4000 | 5000 | 6000 | 7000 | 8000 | null;
}

const Toast = (props: IToast): JSX.Element => {
  const {
    id,
    open = false,
    smallSize = false,
    title,
    content = "",
    duration = null,
  } = props;

  return <></>;
};

reactjs

来源：https://stackoverflow.com/questions/76106349/how-to-set-2-different-value-for-a-typescript-interface-prop-that-depends-on-oth

1条答案

按热度按时间

ar7v8xwq1#

您需要定义两个单独的接口来扩展IToast

interface IToast {
  id: string;
  open: boolean;
  title?: string;
  content: string;
}

interface ISmallToast extends IToast {
  smallSize: true;
  duration?: 4000 | 5000 | 6000 | null;
}

interface ILargeToast extends IToast {
  smallSize?: false;
  duration?: 6000 | 7000 | 8000 | null;
}

然后像这样使用它们

const Toast = (props: ISmallToast | ILargeToast) => {}

这样，每当smallSize为真时，持续时间只能具有ISmallToast中定义的值，如果smallSize为假或未定义，则持续时间只能具有ILargeToast中定义的值

赞(0）回复(0）举报 2023-04-29

我来回答

reactjs 如何为依赖于其他属性值的typescript接口属性设置2个不同的值？

1条答案

相关问题

热门标签

最新问答