我正在使用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
中可用