Question

大家晚上好，

我是Flow的新手，正在编写一个使用React 16 + MobX的程序。到目前为止，我还没有太多问题，但仍处于项目的早期阶段。

成为Flow的新手已经引发了一些问题。在这种情况下，我无法弄清楚如何解决我收到的子组件的不兼容错误。

我已经包含了＆＃39;流量状态＆＃39;输出如下，希望有人可以帮助我或指出我正确的方向来解决问题。

我希望你有一个美好的夜晚！

Ryan P。

    yarn run v1.7.0
    $ /Users/ryan/Projects/React/ao-boilerplate/node_modules/.bin/flow status
    Error ------------------------------------------------------------------- src/core/components/ThemeManager/index.jsx:8:3

    Cannot return `<Fragment />` because `React.Element` [1] is incompatible with `Node` [2].

      src/core/components/ThemeManager/index.jsx:8:3
      8|   <Fragment>{children}</Fragment>
            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [1]

    References:
      src/core/components/ThemeManager/index.jsx:7:58
      7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                                  ^^^^ [2]


    Error --------------------------------------------------------------------------- src/modules/App/views/AppRoot.jsx:16:3

    Cannot create `ThemeManager` element because `React.Element` [1] is incompatible with `Node` [2] in property `children`.

      src/modules/App/views/AppRoot.jsx:16:3
            v-------------
      16|   <ThemeManager>
      17|     <Page>
      18|       <Route path="/" exact component={Login} />
      19|       <Route path="/signup" component={Signup} />
      20|       <Route path="/password-help" component={PasswordHelp} />
      21|     </Page>
      22|   </ThemeManager>
            --------------^

    References:
      src/modules/App/views/AppRoot.jsx:17:5
              v-----
      17|     <Page>
      18|       <Route path="/" exact component={Login} />
      19|       <Route path="/signup" component={Signup} />
      20|       <Route path="/password-help" component={PasswordHelp} />
      21|     </Page>
              ------^ [1]
      src/core/components/ThemeManager/index.jsx:7:49
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                          ^^^^ [2]


    Error --------------------------------------------------------------------------- src/modules/App/views/AppRoot.jsx:16:3

    Cannot instantiate `React.Element` because in type argument `ElementType`:
    - Either inexact `Node` [1] is incompatible with exact `React.Element` [2] in the return value.
    - Or `Node` [1] is incompatible with `React.Portal` [3] in the return value.
    - Or property `@@iterator` is missing in `Node` [1] but exists in `$Iterable` [4] in the return value.
    - Or function [5] is incompatible with statics of `React.Component` [6].

      src/modules/App/views/AppRoot.jsx:16:3
              v-------------
        16|   <ThemeManager>
        17|     <Page>
        18|       <Route path="/" exact component={Login} />
        19|       <Route path="/signup" component={Signup} />
        20|       <Route path="/password-help" component={PasswordHelp} />
        21|     </Page>
        22|   </ThemeManager>
              --------------^

    References:
      src/core/components/ThemeManager/index.jsx:7:58
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                                    ^^^^ [1]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:18:5
        18|   | React$Element<any>
                ^^^^^^^^^^^^^^^^^^ [2]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:19:5
        19|   | React$Portal
                ^^^^^^^^^^^^ [3]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:20:5
        20|   | Iterable<React$Node>;
                ^^^^^^^^^^^^^^^^^^^^ [4]
      src/core/components/ThemeManager/index.jsx:7:22
                                v--------------------------------------------
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
        8|   <Fragment>{children}</Fragment>
        9| );
            ^ [5]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:161:5
      161|   | Class<React$Component<any, any>>;
                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ [6]


    Error --------------------------------------------------------------------------- src/modules/App/views/AppRoot.jsx:16:4

    All branches are incompatible:
    - Either inexact `Node` [1] is incompatible with exact `React.Element` [2].
    - Or `Node` [1] is incompatible with `React.Portal` [3].
    - Or property `@@iterator` is missing in `Node` [1] but exists in `$Iterable` [4].

      src/modules/App/views/AppRoot.jsx:16:4
      16|   <ThemeManager>
              ^^^^^^^^^^^^

    References:
      src/core/components/ThemeManager/index.jsx:7:58
        7| const ThemeManager = ({ children }: { children: Node }): Node => (
                                                                    ^^^^ [1]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:18:5
      18|   | React$Element<any>
              ^^^^^^^^^^^^^^^^^^ [2]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:19:5
      19|   | React$Portal
              ^^^^^^^^^^^^ [3]
      /private/tmp/flow/flowlib_27aa7f4c/react.js:20:5
      20|   | Iterable<React$Node>;
              ^^^^^^^^^^^^^^^^^^^^ [4]



    Found 4 errors

    Only showing the most relevant union/intersection branches.
    To see all branches, re-run Flow with --show-all-branches
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Answer 1

您是否已导入{ Node } from "react"？如果没有，Node是指DOM节点，而不是React Node类型。

Answer 2

首先，流化我们刚刚编写的组件：

import * as React from 'react'

如果您的组件render（）方法需要返回类型，则应使用React.Node，并且渲染块内的类型应为React.Compenent或React.Element。

来自Flow文档： React.Node的定义可以使用React.ChildrenArray粗略地估算

type Node = React.ChildrenArray<void | null | boolean | string | number | React.Element<any>>

如果可以看完整段代码，我可以做些更好的评论，但据我所知，类ThemeManager的类型应该是React.Component。

const ThemeManager = ({ children }: { children: ?React.Node }): React.Component<Props> => ...

反应流类型错误

2 个答案: