Question

此代码使用field.type这是一个字符串，以确定要渲染的组件。

SelectOptionsOverlay组件将使用其CardFormSelectField渲染type=="select"（options）。

CardFormTextAreaOverlay将呈现CardFormTextAreaField（type=="textarea"），并且此组件将永远不会尝试使用options或CardFormTextAreaField中不存在的任何其他属性。


export type CardFormSelectField = {
  title: string,
  type: string,
  placeholder: string,
  options: string[]
};

export type CardFormTextAreaField = {
  title: string,
  type: string
};

export type CardFormField = CardFormSelectField | CardFormTextAreaField;

overlay(field: CardFormField): ?(SelectOptionsOverlay | CardFormTextAreaOverlay) {
    const props = {...};
    switch (field.type) {
      case "select":
        return <SelectOptionsOverlay {...props} />;
      case "textarea":
        return <CardFormTextAreaOverlay {...props} />;
    }
  }

switch语句可确保一切安全。但是，Flow并不“知道” switch语句及其安全益处，因此抱怨：

Cannot return <SelectOptionsOverlay /> because: 
Either React.Element [1] is incompatible with SelectOptionsOverlay [2].
Or React.Element [1] is incompatible with CardFormTextAreaOverlay [2].

[1]是return语句，[2]是函数的返回值的类型声明：?(SelectOptionsOverlay | CardFormTextAreaOverlay)

第二个return语句（对于CardFormTextAreaOverlay）也存在相应的错误。

我实际上很难理解这意味着什么，更不用说是否有可能解决它了。

另一方面，据我所知，如果我删除return语句的类型注释，Flow仅会用SelectOptionsOverlay抱怨return语句，抱怨field道具可能如何包含{{1}中不存在的options和placeholder。

是的，但是switch语句应该保护我们在实际收益中免受不良道具的侵害。但是您不能打开FlowType吗？因为Flow不是真正的JS？

Answer 1

如果可能并且对您的代码有意义，则可以为每个type专门设置CardFormField属性。例如，您可能有type: string，而不是CardFormSelectField的{{1}}。这样，Flow知道进入type: "select"块时，case "select"的类型必须为props。当前，Flow无法将每个CardFormSelectField语句与并集类型中的特定类型相关联。

case

Try Flow

在Flow中打开联合类型

1 个答案: