web-dev-qa-db-ja.com

<React.Fragment>または<> </>でフローエラーが発生しますが、<Fragment>では発生しません

reactv16.3.とflow-binv0.69.を使用しています

React Fragments を<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 defを掘り下げると、エラーは事実上正しいように見えます-Fragment is のエクスポートが定義され、フラグメントはデフォルトのエクスポートのプロパティとして定義されていません。

しかし、フロードキュメント フローはreact Fragmentsをサポートしていると述べています からv0.59以降。

それで、これは実際にはまだ存在するサポートのギャップですか？それとも私は何か間違ったことをしていますか？おそらく私はどういうわけか古いlibdefを持っているか、物事が間違って構成されていますか？エラーメッセージをグーグルで検索するものが見つからないため、セットアップに問題があるのではないかと思われます。また、これで問題が解決しないとは信じられません。

reactjsflowtypereact-fragment
5
davnicwil

定義にReact.Fragmentを含めるための修正は、このコミットに含まれています： https://github.com/facebook/flow/commit/b76ad725177284681d483247e89739c292ed982b

フロー0.71で利用可能である必要があります

6
Delapouite

これを修正するには、import * as React from 'react'を使用する必要があります:)

7
Aldredcz