<React.Fragment>或<> </>上的流错误,但不是<Fragment>

Question

我使用的是react v16.3.0和flow-bin v0.69.0

使用反应片段<React.Fragment>或其中的任何一种或<></>类似的速记语法

import React from 'react'

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

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

流程抱怨以下错误(两者都是一个混淆错误,只是在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简写语法,这个问题阻止我暂时不这样做.

当我深入到react.js错误高清引用的lib它确实出现该错误是确凿无误的-出口Fragment 的定义和片段没有定义为默认的导出的属性.

但是流程文档声明流程支持 从v0.59起反应碎片.

那么这实际上仍然存在支持差距吗？或者我做错了什么？也许我不知何故有一个过时的lib def或配置错误的东西？我找不到任何谷歌搜索错误消息,这导致我怀疑这是我的设置问题.此外,我不能完全相信这不会成功.

Answer 1

你必须用来import * as React from 'react'修复这个:)

Answer 2

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

它应该在流程中可用 0.71