流中的 PropTypes 组件检查等效项答案

【问题标题】：PropTypes component checking equivalent in Flow流中的 PropTypes 组件检查等效项
【发布时间】：2017-05-01 22:06:46
【问题描述】：

使用 PropTypes 给出以下代码（请参阅this 问题）

const SomeComponent = ({comp}) => {...}

SomeComponent.propTypes = { 
  comp: PropTypes.shape({
    type: PropTypes.oneOf([SomeOtherComponent])
  })
}

使用流类型的等价物是什么？

我只做到了：

const SomeComponent = ({comp}: {comp: React$Element<any>}) => {...}

使用 this 作为参考，但这将允许 comp 成为任何 React 组件。

如何使用 Flow 对 prop 进行类型检查以确保它是特定 React 组件的实例？

【问题讨论】：

标签： reactjs flowtype react-proptypes

【解决方案1】：

简短的回答：你不能。 React 元素是在运行时创建的，Flow 只能使用通过自己的静态分析获得的数据，这不足以确定在运行时将用于创建 React 元素的组件类。这很复杂，主要是因为用于创建元素的组件类只能在运行时定义。允许 Flow 尝试确定元素的运行时类型将不可避免地使其遇到使用您想要的组件完全有效但 Flow 不允许您使用的情况。

如果您想检查组件道具的类型，请按照this question 中的说明在运行时进行。您可以通过使用指示“开发模式”的全局变量来禁用这种生产检查。例如：

 function elementIsOfType(element, typeName) {
   if (!__DEV__) {
     return true;
   }
   return element.type.displayName === typeName;
 }

然后您可以将__DEV__ 变量设置为false 以禁用所有运行时检查。

【讨论】：

我会在接受这个问题前几天再提出这个问题。我的乐观主义者希望你是错的，但我的悲观主义者已经知道你不是。
我希望你不必接受我的回答，真的。不过，我确实认为我是对的。

【解决方案2】：

从 Flow 0.53 开始，这可以使用 React.Element<typeof Component> 完成。

【讨论】：