reactjs – PropTypes组件检查Flow中的等效项

2023年1月24日 275次阅读

给出以下使用PropTypes的代码(参见 this问题)

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

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

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

我只是得到了：

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

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

如何键入检查prop以确保它是使用Flow的特定React组件的实例？

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

如果要检查组件prop的类型,请在运行时按照this question中的说明进行操作.您可以通过使用指示“开发模式”的全局变量来禁用此类检查.例如：

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

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

点赞