使用React.Node时的流类型错误

Question

我编写了一个我喜欢的实用程序函数，但由于某种原因我无法实现它的流程类型。以下代码产生错误。

// @flow
import React from 'react';
import type { Node } from 'react';

export const partializeComponent = (partialProps: any) =>
  (Component: Node) =>
    (props: any): Node => (
      <Component
        {...partialProps}
        {...props}
      />
    );

由于错误非常详细，我更换了截图

Answer 1

您的问题是，在应用于参数组件时，您错误地使用了类型Node。类型Node表示JSX元素，例如....它是React组件渲染方法的正确返回类型。

实际上，您应该使用类型ComponentType并传递Prop类型以反映组件的实现。

我已经更新了您的示例，填写了一些空白，让您继续前进。

// @flow
import React from 'react';
import type { ComponentType, Node } from 'react';

type PartialProps = {
  prop1: string,
  prop2: number,
};

type Props = PartialProps & {
  otherProps: string,
};

export const partializeComponent = (partialProps: PartialProps) =>
  (Component: ComponentType<Props>) =>
    (props: Props): Node => (
      <Component
        {...partialProps}
        {...props}
      />
    );

请注意，这不是经过测试，而是来自内存。