HOC导入TypeError：Object（...）不是函数

Question

我只是尝试使用带有React的简单HOC。 这是函数：

import React from "react"

const withOptions = (WrappedComponent) => {

  return class extends React.Component {

    render() {
      return <WrappedComponent { ...this.props } />
    }
  }

}

export default withOptions

问题似乎出在我导出/导入它的方式上。

以简单的方式导入和使用，可以正常工作：

import withOptions from "./Options"
...

class BilanClimatique extends React.Component{
  ...
}
const StyledBilanClimatique = withStyles(styles)(BilanClimatique)
export default withOptions(StyledBilanClimatique)

但是如果我使用像index.js这样的中间文件

import withOptions from "./Options"

export {
  withOptions
}

然后将其导入到我的组件中

import {
  withOptions
} from "./index"

这就是我得到的

有人可以帮我理解吗？

编辑：

我发现使用HOC的组件是从与HOC相同的文件中导入的：

import withOptions from "./Options"
import BilanClimatique from "./BilanClimatique"

export {
  withOptions,
  BilanClimatique
}

那会导致问题，但我不明白为什么... 这是一个存在问题https://codesandbox.io/s/r074735yvo

的沙盒

Answer 1

这似乎是悬挂“出口”的问题。据我所知，imports得到了hoisted，但我看不到exports有类似的东西。

引起问题的流程（codesandbox）：

App.js：

import { BilanClimatique } from "./components/index";

./ components / index.js：

// just using the "re-export" shortcut
export { default as BilanClimatique } from "./BilanClimatique";
export { default as withOptions } from "./Options";

./ components / BilanClimatique.js：

import { withOptions } from "./index";

./ components / Options.js：

const withOptions = WrappedComponent => {
  return ... //snipped code

export default withOptions;

当App.js向BilanClimatique索要index.js时，它又向withOptions索要 same index.js。但是由于出口似乎没有增长，因此index.js尚未使option提供。

如何解决：

1. 订购的出口商品：

在./components/index.js中，根据您的依赖关系更改导出顺序：

// just using the "re-export" shortcut
export { default as withOptions } from "./Options";
export { default as BilanClimatique } from "./BilanClimatique";

我不推荐。非常脆弱。

1. 使用index.js仅公开给您的命名空间之外。在您的命名空间中，依靠显式导入。

即在./components/BilanClimatique.js中：

import withOptions from "./Options";

1. 如果您的代码库非常大，请使用多个index.js导出“合同”。看一下各种库作者的代码库，我认为这是他们采取的策略。

除非您遇到＃2问题，否则我个人将＃2推荐给＃3。

Answer 2

.看起来不是很好的导入路径。尝试从“索引”文件导入。

import {
  Logo,
  withOptions
} from "./index"