Ошибки потока в <React.Fragment> или <> </>, но не в <Fragment>

Я использую 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>
)

Что здесь происходит? Я хотел бы использовать <></> Фрагментируйте сокращенный синтаксис, и эта проблема мешает мне сделать это сейчас.

Когда я копаюсь в react.js lib def, на который ссылаются в ошибке, действительно, кажется, что ошибка действительно корректна - экспорт Fragment определяется, а Fragment не определяется как свойство при экспорте по умолчанию.

Но документация потока утверждает, что поток поддерживает реагирующие фрагменты начиная с v0.59 и далее.

Так на самом ли деле это пробел в поддержке, который все еще существует? Или я что-то не так делаю? Возможно, у меня как-то устарела библиотека lib def или настроены неправильно? Я не могу найти ничего в поиске сообщения об ошибке, что наводит меня на мысль, что это проблема с моей настройкой. Также я не могу поверить, что это не сработает.

Источник

2 ответа

Решение

Исправление, чтобы включить 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
Источник

Поддержка фрагментов JSX доступна в Babel v7.0.0-beta.31 и выше! Если вы уже пользуетесь Babel 7, просто обновитесь до последней версии Babel и преобразования плагинов:

для пользователей пряжи

yarn upgrade @babel/core @babel/plugin-transform-react-jsx

для пользователей npm

npm update @babel/core @babel/plugin-transform-react-jsx

если вы используете предустановку реагирования

https://www.npmjs.com/package/@babel/preset-react

для пользователей пряжи

yarn upgrade @babel/core @babel/preset-react

для пользователей npm

npm update @babel/core @babel/preset-react

Источник
Другие вопросы по тегам