反应流类型错误

Question

大家晚上好，

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

刚接触 Flow 会导致一些问题。在这种情况下，我无法弄清楚如何解决我收到的子组件不兼容错误。

我在下面包含了“流程状态”输出，希望有人可以帮助我或为我指明正确的方向以解决问题。

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

瑞安·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 节点，而不是 ReactNode类型。