reactjs - 如果使用另一个可选 Prop ，我可以将 Typescript 必需的 Prop 更改为不需要吗？

Question

我有一个通常需要 close 方法 Prop 的组件，因此界面如下所示:

interface Props {
  onClose: () => void;
  footer?: React.ReactElement
}

但是，当添加页脚属性后，就不再需要 onClose 了。目前我必须执行以下操作来解决此问题。

<Modal
  footer={renderFooterWhichHasItsOwnCloseMethod()}
  onClose={null}
  >
    {children}
</Modal>

有没有办法用 Typescript 来处理这个问题。

我做了什么:

我用谷歌搜索并查看了一些示例，但无法使其工作。以下是我发现的两个结果之一。

https://www.benmvp.com/blog/conditional-react-props-typescript/

Answer 1

如果意图是选择其中之一，那么最好使用有区别的联合类型:

type Props = 
   { onClose: () => void } |
   { footer: React.ReactElement };

这将强制使用其中之一。但不能同时两者。

<Modal footer={renderFooterWhichHasItsOwnCloseMethod()}>
   {children}
</Modal>
// ok
<Modal onClose={() => console.log('Close!')}>
   {children}
</Modal>
// ok
<Modal onClose={() => console.log('Close!')}
       footer={renderFooterWhichHasItsOwnCloseMethod()}>
   {children}
</Modal>
// not ok