React＆Typescript-如果发送其他参数，是否可以阻止发送参数？

Question

我使用react和Typescript。

我想确保只会发送3个道具中的1个。我已经定义了这样的接口：

interface General {
  prop1?: boolean
  prop2?: boolean
}

interface Option1 extends General {
  prop3: boolean
}

interface Option2 extends General {
  prop4: boolean
}

interface Option3 extends General {
  prop5: boolean
}

type Option1orOtion2orOption3 = Option1 | Option2 | Option3 

我这样使用它：

export default function MyFunc({prop1 = true, prop2 = true, ...props } : Option1orOtion2orOption3 ) {
  return <></>
}

当我尝试这样做时，我想得到一个错误，我不希望有人同时通过prop3和prop4和prop5。

<MyFunc prop1={true} prop3 prop4 prop5 />

我该怎么做？有可能吗？

谢谢！

Answer 1

您是否尝试过使用React提供的FC接口？它可能适用于：

FC<Option1 | Option2 | Option3>

但我不太确定这是否是一种健康模式：/

您可能想要创建三个单独的组件，即使它会产生一些代码重复。