创建 React HOC 时出现以下错误：type is invalid -- expected string or a class/function but got: object

Question

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

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

我在谷歌上搜索了很多，但看起来所有具有相同问题的帖子都是由 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>
      );
    }
  };
}

如您所见，我默认导出一个函数，其中 returns 一个组件，其 render 方法简单地呈现传递的组件，包裹在 div 和另一个 div之前。

我是这样导入的：

import hocSample from 'hoc-sample.js';

这里是我如何在文件中创建 HOC：

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

下面是我如何在 render 方法中使用它：

<HOCSample />

我收到以下错误：

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

知道我遗漏了什么吗？

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

Answer 1

我在 codesandbox 存储库 link 中为您复制了这个 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);

创建 React HOC 时出现以下错误：type is invalid -- expected string or a class/function but got: object

Getting the following error when creating React HOC: type is invalid -- expected string or a class/function but got: object

javascript

reactjs

flowtype

higher-order-components