javascript - 创建React HOC时收到以下错误:类型无效—预期的字符串或类/函数但得到了:对象

这是我第一次在工作环境中使用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：类型无效-预期为字符串（对于
  内置组件）或类/函数（用于复合组件）
  但得到：对象。


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

我仔细检查了我拥有的许多其他项目，并且相同的代码似乎可以正常工作。

最佳答案

我在https://codesandbox.io/s/x3qr9xqxpz的codeandbox仓库链接中为您复制了此代码

你的问题在这里

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

hocSample期望React组件不是HTML元素，因此，

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