使用 Flow 对 React 中深度嵌套的 props 进行类型检查

Posted 2023-02-23

【中文标题】使用 Flow 对 React 中深度嵌套的 props 进行类型检查

【英文标题】：Typecheck deeply nested props in React, with Flow

【发布时间】：2016-08-27 21:25:35

【问题描述】：

对于我们来说，深度嵌套的组件是很常见的，它们的 props 通过对象传播从上到下传递：

render() 
  return <MyComponent  ...this.props  />;

在许多情况下，中间的组件并不知道以这种方式流经它们的 props，并且要注释流经每个组件的每个 props 需要这些组合组件了解每个孩子的一切。

有没有办法避免这种情况，这样在层次结构顶部注释的道具将根据它们在层次结构底部的使用情况进行检查，而无需在每个组件之间进行注释，也无需简单地导出和导入类型别名，会破坏层级关系？

【问题讨论】：

Flow 需要明确注释模块的导出 (flowtype.org/docs/modules.html#missing-required-annotations)。我认为这是不可能的。

【参考方案1】：

通过声明ParentComponent.someProp 与ChildComponent.someOtherProp 具有相同的类型，尝试使用Flow 的typeof operator。

【讨论】：

如果没有 1) 要求父母或孩子具体了解另一方，或者 2) 导出和导入类型别名，我不确定我是否理解如何做到这一点。您能否提供一些示例代码来说明您的想法？

通过 Flow 的类型检查，您不会超过 #1。您可以使用any 类型，但这会禁用类型检查。考虑以不同的方式组合组件，而不是传递未知的子道具，而是传递已经应用了这些道具的元素。我知道这不是您想要的，但在某些有限的情况下可能会有所帮助。