Question

我正在为我的雇主开发UI套件，我们正在创建一个Input组件，该组件抽象一个本地输入，添加自定义行为，即清除输入的值，自定义验证规则等...

当涉及到它的界面时，我想同时支持受控和不受控制版本。因此，他们的API将/应该如下所示：

// Controlled example
// Input will render what the parent sets via the `value` prop
<Input value="test" />

// Uncontrolled example
// Input keeps the value in its internal state
// the parent might only set the initial value
<Input defaultValue="test" />

这两种情况是互斥的，因此如果第三方尝试同时使用这两种情况，我想抛出Flow警告：

// This should throw a Flow warning
<Input defaultValue="test" value="test" />

因此，我想知道如何用Flow做到这一点。如果我按如下方式定义类型，则编译器似乎没有抱怨，因此带有两个道具的上一个示例将正常工作，并且不应该发生这种情况：

type Controlled = {|
    value: string | number,
    defaultValue?: void,
|}

type Uncontrolled = {|
    value?: void,
    defaultValue: string | number,
|}

type InputNature = Controlled | Uncontrolled

export type InputProps = {|
    ...InputNature,
    // other props here...
|}

有关如何执行此操作的任何反馈？可能吗当然，我可以将value和defaultValue都设置为可选道具，但是如果两个道具同时使用或缺失，编译器将不会抱怨。

谢谢！

如何为同时支持受控版本和不受受控版本的Input组件定义流类型？

0 个答案: