<React.Fragment> 或 <>/> 上的流错误，但 <Fragment> 上没有

Question

我正在使用 react v16.3.0 和 flow-bin v0.69.0

将 React Fragments 与 <React.Fragment> 或 shorthand <></> 语法一起使用

import React from 'react'

const ComponentA = () => (
  <React.Fragment>
    <div>Component</div>
    <div>A</div>
  </React.Fragment>
)

const ComponentB = () => (
  <>
    <div>Component</div>
    <div>B</div>
  </>
)

Flow 抱怨以下错误（这对两者都是同一个错误，这里只是显示 ComponentA 的输出）

Cannot get React.Fragment because property Fragment is missing in object type [1].

  24│ const ComponentA = () => (
  25│   <React.Fragment>
  26│     <div>Component</div>
  27│     <div>A</div>
  28│   </React.Fragment>

 /private/tmp/flow/flowlib_2349df3a/react.js
 251│   declare export default {|
 252│     +DOM: typeof DOM,
 253│     +PropTypes: typeof PropTypes,
 254│     +version: typeof version,
 255│     +initializeTouchEvents: typeof initializeTouchEvents,
 256│     +checkPropTypes: typeof checkPropTypes,
 257│     +createClass: typeof createClass,
 258│     +createElement: typeof createElement,
 259│     +cloneElement: typeof cloneElement,
 260│     +createFactory: typeof createFactory,
 261│     +isValidElement: typeof isValidElement,
 262│     +Component: typeof Component,
 263│     +PureComponent: typeof PureComponent,
 264│     +Children: typeof Children,
 265│   |};

然而，通过显式导入 Fragment，流不会抱怨。

import { Fragment, default as React } from 'react'

const ComponentC = () => (
  <Fragment>
    <div>Component</div>
    <div>C</div>
  </Fragment>
)

这是怎么回事？我想使用 <></> Fragment shorthand 语法，这个问题暂时阻止了我这样做。

当我深入研究错误中引用的 react.js lib def 时，它确实显示错误实际上是正确的 - Fragment 的导出是 已定义且片段未在默认导出时定义为属性。

但是流程文档 state that flow has support for react Fragments 从 v0.59 开始。

那么这实际上是一个仍然存在的支持缺口吗？还是我做错了什么？也许我有一个过时的 lib def 或者配置错误？我找不到任何关于错误消息的谷歌搜索，这让我怀疑这是我的设置问题。我也不太相信这不会解决问题。

Answer 1

你必须使用 import * as React from 'react' 来解决这个问题:)

Answer 2

在定义中包含 React.Fragment 的修复包含在此提交中： https://github.com/facebook/flow/commit/b76ad725177284681d483247e89739c292ed982b

流程中应该可以使用0.71

Answer 3

简单如：

import * as React from 'react'

const Component = (): React.Element<typeof React.Fragment> => (
  <>
    <span> / </span>
    <span> \ </span>
  </>
)

export default Component

<React.Fragment> 或 <>/> 上的流错误，但 <Fragment> 上没有

Flow errors on <React.Fragment> or <></>, but not <Fragment>

reactjs

flowtype

react-fragment