反应HOC抛出＆＃34;元素类型无效＆＃34;错误

Question

我有一个简单的portfolio project用React制作。我想使用HOC（高阶组件），所以我做了一个简单的测试HOC，但抛出了这样的错误：

  

元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

我的HOC是一个简单的withTest HOC，如下所示：

import React from 'react';

const withTest = (prefix = '') => Comp => props => {
  console.log(`${prefix} This is the withTest HOC.`);
  return <Comp {...props} />;
};

export default withTest;

我在App组件中使用此HOC，如下所示：

import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import { Header, ProjectPage, AboutPage, Footer } from '../../components';
import { withTest } from '../../hoc';

const MyFooter = withTest('Footer Comp')(Footer);

function App() {
  return (
    <BrowserRouter>
      <div className="App container">
        <div className="mt-5">
          <Header />
        </div>
        <div className="my-5">
          <Route exact path="/portfolio" component={ProjectPage} />
          <Route path="/portfolio/about" component={AboutPage} />
        </div>
        <div className="mb-5">
          <MyFooter />
        </div>
      </div>
    </BrowserRouter>
  );
}

export default App;

为什么会抛出错误？

我发现了错误的来源。但我不知道为什么会出错 如果有人知道细节，请帮助我。

我使用index.js文件来轻松导入和导出我的组件。这会造成错误。

• index.js表示我的组件（src/components/index.js）

  import Component1 from './Component1';
  import Component2 from './Component2';
  
  export { Component1, Component2 };
  

  使用：

  import { Component1, Component2 } from '../../components';
  

当我像上面那样使用时。我Component1以外Component2和undefined function App() {...}。

App.js：

...
import { ..., Footer } from '../../components';

...  // here my Footer Component is undefined.

function App() {
    ...  // here my Footer Component is alive.
}

export default App;

所以，当我使用

时

import Footer from '../../components/Footer';

我没有错误。

App.js：

...
import Footer from '../../components/Footer';

...  // Now here my Footer Component is alive too.

function App() {
    ...  // here my Footer Component is alive.
}

export default App;  

问题在于我不知道它们之间的区别 我为什么要直接导入我的组件？ 谢谢阅读！有一个很好的编码！