如何从 React 中的索引文件导出多个组件？

Question

这是我的 index.jsx 文件：

import Navbar from './Navbar/Navbar';
import Greeting from './Greeting/Greeting'
import Project from './Project/Project';
import About from './About/About';
import Contact from './Contact/Contact';
import Footer from './Footer/Footer';

export default {
  Navbar,
  Greeting,
  Project,
  About,
  Contact,
  Footer,
};

还有我的 App.jsx 文件：

import React from 'react';
import {Navbar} from './components';

// import Navbar from './components/Navbar/Navbar';

const App = () => {
  return (
    <div>
      <Navbar />
    </div>
  )
}

export default App;

当我调用通过index.jsx文件导入Navbar时，我得到了这个错误：

未捕获的语法错误：请求的模块 */sre/components/index.html 是吗？ App.isx:4 t=1672200538218' 不提供名为“Navbar”的导出

如果我通过索引文件调用 Navbar，我遇到了什么问题？ 太感谢了！

如何通过索引文件调用导入多个组件。

Answer 1

您可以直接导出它们，而不是导入它们然后导出它们，如下所示。 但是要使上述解决方案起作用，您应该使用命名导出，例如export function Navbar() {而不是export default function Navbar() { 。

export { Navbar } from "./Navbar/Navbar";
export { Greeting } from "./Greeting/Greeting";
export { Project } from "./Project/Project";
export { About } from "./About/About";
export { Contact } from "./Contact/Contact";
export { Footer } from "./Footer/Footer";

但是如果你宁愿保留你的default导出，你应该按照下面的方式而不是你所拥有的（我不喜欢，因为无论如何命名导出更好）：

export { defautl as Navbar } from "./Navbar/Navbar";
export { defautl as Greeting } from "./Greeting/Greeting";
export { defautl as Project } from "./Project/Project";
export { defautl as About } from "./About/About";
export { defautl as Contact } from "./Contact/Contact";
export { defautl as Footer } from "./Footer/Footer";

您可以在mdn上了解有关export的更多信息。