Получение следующей ошибки при создании React HOC: тип недействителен - ожидаемая строка или класс / функция, но получил: объект

Question

Впервые я использую Flow в рабочей среде, я обычно предпочитаю TypeScript вместо Flow.

У меня возникла проблема с созданием действительно простого HOC, что я делал много раз без проблем.Скорее всего, мне не хватает чего-то действительно очевидного или чего-то связанного с Потоком, о котором я не знаю.

Я много гуглил, но, похоже, все сообщения с одинаковыми проблемами вызваны default vs named exports/imports, что не выглядит в моем случае (я полагаю).

Здесь все файлы, в которых я определяю HOC (предположим, hoc-sample.js):

// @flow

import React from 'react';

export default function hocSample(Component: any) {
  return class extends React.Component<any, any> {
    render() {
      return (
        <div>
          <div>TEST</div>
          <Component />
        </div>
      );
    }
  };
}

Как вы видите, я по умолчанию экспортирую функцию, которая возвращает компонент, чей render Метод просто отображает переданный компонент, заключенный в div с другим div ранее.

Вот как я его импортирую:

import hocSample from 'hoc-sample.js';

Вот как я создаю HOC внутри файла:

const HOCSample = hocSample(<div>WRAPPED COMPONENT</div>);

А вот как я использую его внутри render method:

<HOCSample />

Я получаю следующую ошибку:

React.createElement: тип недействителен - ожидается строка (для встроенных компонентов) или класс /функция (для составных компонентов), но получил: object.

Любая идея, что является очевидным, что я упускаю, пожалуйста?

Я дважды проверил во многих других проектах, которые яесть, и тот же код, кажется, работает совершенно нормально.

Answer 1

Я повторил это для вас в ссылке для репозитория CodeSand здесь https://codesandbox.io/s/x3qr9xqxpz

Ваша проблема здесь

 const HOCSample = hocSample(<div>WRAPPED COMPONENT</div>);

hocSample ожидает, что компонент React не является элементом HTML, поэтому

const MyApp = () => <div>WRAPPED COMPONENT</div>;
const HOCSample = hocSample(MyApp);