此 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（celeserror）

的类型注释

编辑：流量：0.78.0rnversion：0.57

Answer 1

从Flow 0.89.0，您要用于HOCS中包装组件的类型是React.AbstractComponent。

此类型需要两个类型的参数，即Config和Instance。Instance通常可以安全地忽略，而Config虽然在技术上同时包含Props Type 和 DefaultProps，但实际上被用作Props类型。因此，我们基本上可以将任何React组件（类，功能，您拥有的内容）键入React.AbstractComponent<Props>。

// @flow
import * as React from 'react';
export default <Props: { children: React.Node }>(
  Comp: React.AbstractComponent<Props>,
) => ({ children, ...props }: Props) => (
  //...
);

请注意，我们正在向Props通用添加一个绑定，以告诉Flow，Props始终包含React.Node类型的属性children，否则当我们尝试从Props提取children时，Flow不知道它存在。

buuuut，由于您正在与较旧的流程版本中的React-native合作，因此您需要使用React.ComponentType，这并不那么抽象（它不做前面简短提及的Instance的内容）。这是一个例子。

Answer 2

可能是因为在定义之前使用<Comp />？导出默认的comp，导出组件函数，然后调用其中的组件，这可能是未定义的。可以先尝试一下，请参阅错误是否消失？

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