在这个React HOC中，“Comp”的正确流量类型是什么？

Question

export default Comp => ({ children, ...props }: { children?: Node }) => (
  <KeyboardAvoidingWrapper
    keyboardVerticalOffset={-getBottomSpace() / 2}
    behavior="padding"
    enabled
  >
    <Comp {...props}>{children}</Comp>
  </KeyboardAvoidingWrapper>
);

这是错误代码流生成的：'Comp'.Flow（InferError）缺少类型注释

编辑：FlowVersion：0.78.0 RNVersion：0.57

Answer 1

从流0.89.0开始，您要用于HOC中包装组件的类型是React.AbstractComponent。

这种类型有两个类型参数，Config和Instance。 Instance通常可以被安全地忽略，而Config虽然在技术上同时包含Props类型和DefaultProps，但实际上只是用作Props类型。因此，我们可以基本上键入任何反应组件（类，函数，你有什么）作为React.AbstractComponent<Props>。

// @flow
import * as React from 'react';

export default <Props: { children: React.Node }>(
  Comp: React.AbstractComponent<Props>,
) => ({ children, ...props }: Props) => (
  //...
);

请注意，我们将bound添加到Props generic以告知流量Props将始终包含children类型的属性React.Node，否则当我们尝试从children中提取Props时，流量将不知道它存在。

Buuuut，因为你在旧流程版本中使用react-native，你需要使用React.ComponentType，它稍微不那么抽象（它没有做前面简要提到的Instance的东西）。 Here's一个例子。

Answer 2

可能是因为你在定义它之前使用<Comp />？导出默认Comp，导出组件函数，并调用其中的组件，这可能是未定义的。可能先尝试一下，看看错误消失了吗？

export default Comp => ({ children, ...props }: { children?: Node }) => (
  <KeyboardAvoidingWrapper
    keyboardVerticalOffset={-getBottomSpace() / 2}
    behavior="padding"
    enabled
  >
    <Text {...props}>{children}</Text>
  </KeyboardAvoidingWrapper>
);