Flow 需要 HOC 中 props 的类型注解

Question

我正在为 HOC 注入的道具类型而苦恼。

很简单，在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。我错过了什么？为什么让 Flow 抱怨不需要的类型注释？

Answer 1

这个问题将通过这样的导出模块解决：

export default injectProp<AppProps>(App);

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

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

可能对和我有同样问题的人有帮助。

Flow 需要 HOC 中 props 的类型注解

Flow requires type annotation of props in HOC

reactjs

flowtype

high-order-component