我写了一个我喜欢的实用函数,但由于某种原因,我无法实现流式输入。 下面的代码会产生错误。
// @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.
更多推荐
发布评论