Flow требует аннотации типа реквизита в HOC - PullRequest
Новая
       22

Flow требует аннотации типа реквизита в HOC

0 голосов
/ 22 ноября 2018

Я борюсь с типами впрыскиваемых реквизитов по HOC.

Все просто, в Компоненте приложения есть два реквизита: 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);

Кажется, все в порядке, однако, когда я запускаю поток, он завершается неудачно с

Отсутствует тип аннотации для реквизита.

32 |экспорт по умолчанию 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 жалуется на аннотации типов, которые не нужны?

1 Ответ

0 голосов
/ 26 ноября 2018

Эта проблема будет решена с помощью модуля экспорта следующим образом: 

export default injectProp<AppProps>(App);

И обновление до последней версии (0.86.0) будет работать.

Я сделал репо для этого: https://github.com/rico345100/hoc-prop-types-test

Может быть полезно людям, у которых такая же проблема, как у меня.

...