reactjs - Flow 需要 HOC 中 props 的类型注释

Question

我正在努力解决 HOC 注入(inject)的 props 类型。

很简单，在App Component中，有两个props:title和message。

但是title是由HOC提供的。

这是此操作的代码:

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

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

Missing type annotation for Props.

32| export default injectProp(App);

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

export default injectProp<AppProps>(App);

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

> babel-react-webpack-flow-boilerplate@1.0.0 flow F:\dev\web\proptype-test
> flow

Error ----------------------------------------------------------------------------------- src/js/components/App.js:32:16

Cannot compare boolean [1] to statics of `App` [2].

   src/js/components/App.js:32:16
   32| export default injectProp<AppProps>(App);

                      ^^^^^^^^^^^^^^^^^^^ [1]

References:
   src/js/components/App.js:10:7
   10| class App extends Component<AppProps, {}> {

             ^^^ [2]


Error ----------------------------------------------------------------------------------- src/js/components/App.js:32:27

Cannot reference type `AppProps` [1] from a value position.

   src/js/components/App.js:32:27
   32| export default injectProp<AppProps>(App);

                                 ^^^^^^^^

References:
   src/js/components/App.js:5:11
    5| interface AppProps {

                 ^^^^^^^^ [1]


Error --------------------------------------------------------------------------------------------- src/js/index.js:17:1

Cannot call `ReactDOM.render` because boolean [1] is not a React component.

   src/js/index.js:17:1
   17| ReactDOM.render(<App message="A" />, entryEl);

       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

References:
   src/js/components/App.js:32:16
   32| export default injectProp<AppProps>(App);

                      ^^^^^^^^^^^^^^^^^^^^^^^^^ [1]


Error -------------------------------------------------------------------------------------------- src/js/index.js:17:17

Cannot call `ReactDOM.render` with `<App />` bound to `element` because boolean [1] is incompatible with string [2] in
type argument `ElementType` [3].

   src/js/index.js:17:17
    17| ReactDOM.render(<App message="A" />, entryEl);

                        ^^^^^^^^^^^^^^^^^^^

References:
   src/js/components/App.js:32:16
    32| export default injectProp<AppProps>(App);

                       ^^^^^^^^^^^^^^^^^^^^^^^^^ [1]
   C:\Users\User\AppData\Local\Temp\flow\flowlib_6db8195\react.js:159:5
   159|   | string

            ^^^^^^ [2]
   C:\Users\User\AppData\Local\Temp\flow\flowlib_6db8195\react.js:167:29
   167| declare type React$Element<+ElementType: React$ElementType> = {|

                                    ^^^^^^^^^^^ [3]


Error -------------------------------------------------------------------------------------------- src/js/index.js:17:17

Cannot create `App` element because boolean [1] is not a React component.

   src/js/index.js:17:17
   17| ReactDOM.render(<App message="A" />, entryEl);

                       ^^^^^^^^^^^^^^^^^^^

References:
   src/js/components/App.js:32:16
   32| export default injectProp<AppProps>(App);

                      ^^^^^^^^^^^^^^^^^^^^^^^^^ [1]



Found 5 errors

Only showing the most relevant union/intersection branches.
To see all branches, re-run Flow with --show-all-branches

使用 flow-bin@0.69.0 和 React@16.3.0。我缺少什么？为什么 keep Flow 会提示不需要的类型注释？

Answer 1

这个问题将通过导出模块解决，如下所示:

export default injectProp<AppProps>(App);

更新到最新版本(0.86.0)即可。

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

可能对像我一样遇到同样问题的人有帮助。