[英]Flow errors on <React.Fragment> or <></>, but not <Fragment>
我正在使用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
, flow 不会抱怨。
import { Fragment, default as React } from 'react'
const ComponentC = () => (
<Fragment>
<div>Component</div>
<div>C</div>
</Fragment>
)
这是怎么回事? 我想使用<></>
Fragment 速记语法,这个问题现在阻止我这样做。
当我深入到react.js
LIB错误高清引用它确实出现该错误是确凿无误的-出口Fragment
被定义和片段不被定义为在默认的导出的属性。
但是 flow docs 声明 flow从v0.59开始支持 react Fragments 。
那么这实际上是仍然存在的支持差距吗? 还是我做错了什么? 也许我不知何故有一个过时的 lib def 或配置错误? 我在谷歌上找不到任何错误消息,这让我怀疑这是我的设置问题。 此外,我不太相信这行不通。
在此提交中包含在定义中包含React.Fragment
的修复程序: https : //github.com/facebook/flow/commit/b76ad725177284681d483247e89739c292ed982b
它应该在流0.71
可用
你必须使用import * as React from 'react'
来解决这个问题:)
就这么简单:
import * as React from 'react'
const Component = (): React.Element<typeof React.Fragment> => (
<>
<span> / </span>
<span> \ </span>
</>
)
export default Component
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.