使用React.Node时发生流类型错误(Flow type error when using React.Node)

我写了一个我喜欢的实用函数，但由于某种原因，我无法实现流式输入。下面的代码会产生错误。

// @flow import React from 'react'; import type { Node } from 'react'; export const partializeComponent = (partialProps: any) => (Component: Node) => (props: any): Node => ( <Component {...partialProps} {...props} /> );

由于该错误非常详细，因此我使用了截图

I have written a utility function that I like but for some reason I am unable to get achieve the flow typing for it. The below code is producing errors.

// @flow import React from 'react'; import type { Node } from 'react'; export const partializeComponent = (partialProps: any) => (Component: Node) => (props: any): Node => ( <Component {...partialProps} {...props} /> );

Since the error was very verbose, I have taken a screenshot instead

最满意答案

你的问题是你应用到你的参数组件时，你使用的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} /> );

请注意，这没有经过测试，它来自内存。

Your problem is you're using the type Node incorrectly when applied to your argument component. The type Node represents a JSX element e.g. .... It is the correct return type for a React components render method.

In fact you should use the type ComponentType and a pass a Prop type to reflect the component's implementation.

I've updated your example, filled in some blanks for you to get on your way.

// @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} /> );

Please note this is not tested, it's from memory.

更多推荐