创建React HOC时出现以下错误：type无效 - 期望的字符串或类/函数但得到：object

Question

这是我第一次在工作环境中使用Flow，我通常更喜欢TypeScript而不是Flow。

我有一些问题，创建一个非常简单的HOC，这是我做了很多次没有问题。我很可能遗漏了一些非常明显或与Flow有关的东西，我不知道。

我google了很多但看起来所有有相同问题的帖子都是由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方法中使用它：

<HOCSample />

我收到以下错误：

React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object。

知道什么是我想念的明显的东西吗？

我仔细检查了很多其他项目，并且相同的代码似乎完全正常。

Answer 1

我在这里的codeandbox repo链接中为你复制了这个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);