Question

我正在为HOC注入的道具类型苦苦挣扎。

这很简单，在App Component中，有两个道具：<Provider {...providerProps}> <Admin {...props} /> </Provider>和title。

但是message由HOC提供。

这是此代码：

title

看起来不错，但是当我运行流程时，它失败并

缺少道具的类型注释。

32 |导出默认的injectProp（App）;

所以我尝试了这个，但是没有运气：

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

interface AppProps {
    title: string;
    message: string;
}

class App extends Component<AppProps, {}> {
    static defaultProps = {
        message: 'Helloworld'
    }
    render() {
        return (
            <div>
                <div>Title: {this.props.title}</div>
                <div>Message: {this.props.message}</div>
            </div>
        );
    }
}

function injectProp<Props: {}>(
    Component: ComponentType<{ title: string } & Props>
): ComponentType<Props> {
    return function EnhancedComponent(props: Props) {
        return <Component title="Hello" {...props} />;
    }
};

export default injectProp(App);

现在我收到一堆错误消息。

export default injectProp<AppProps>(App);

使用flow-bin@0.69.0和React@16.3.0。我想念什么？为什么让Flow抱怨不需要的类型注释？

Answer 1

此问题将通过以下导出模块解决：

export default injectProp<AppProps>(App);

并且可以更新到最新版本（0.86.0）。

我为此做了回购： https://github.com/rico345100/hoc-prop-types-test

可能会对像我这样有同样问题的人有所帮助。

流需要HOC中的道具类型注释

1 个答案: