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

像这样使用带有<React.Fragment>或简写<></>语法的react Fragments

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速记语法,这个问题目前使我无法这样做。

当我深入研究错误中引用的react.js lib def时,确实显示该错误实际上是正确的-定义了Fragment的导出,未将Fragment定义为默认导出的属性。

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

那么,这实际上是否仍然是支持方面的缺口?还是我做错了什么?也许我以某种方式拥有过时的lib def或配置错误的东西?我找不到任何有关该错误消息的信息,这使我怀疑这是我的设置存在问题。我也不敢相信这不会解决问题。

最佳答案

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

它应该在流程0.71中可用

07-28 03:02
查看更多