创建一个 index.js 文件来导出 { default }？答案

【问题标题】：Creating an index.js file to export { default }?创建一个 index.js 文件来导出 { default }？
【发布时间】：2019-10-16 02:52:25
【问题描述】：

通过查看 MUI 文档页面上发布的一些示例项目，我一直在练习使用 Material UI。其中一些项目，如React Most Wanted 或React, Material UI, Firebase 将为组件创建一个文件夹，其中包含一个仅导出组件的 index.js 文件（例如 export { default } from './LandingPage'）。

这样做的目的是什么，而不是像我习惯的那样简单地将其导出到 LandingPage.js 文件中？这是更好的做法吗？谢谢

【问题讨论】：

其中一个好处是您可以使用 import "./LandingPage"。而不是导入“./LandingPage/LandingPage”。如果您正在移动文件，它也会变得更容易
对，但是为了命名，为什么不直接创建一个名为 LandingPage 的文件夹，在该文件夹中创建一个 index.js 文件，然后将其导入 App.js 中（您可以将其导入为 '从“./pages/LandingPage”导入 LandingPage）？我意识到现在这可能是一个更具体的 React 问题，但我认为将组件保存在文件夹中可能有利于测试目的（如 React、Material UI、Firebase 示例中所示）

标签： reactjs export material-ui

【解决方案1】：

这纯粹是为了可读性而实现的，这意味着您可以在导入语句中使用更少的字符。但是，这不是我通常喜欢做的事情（或者通常看到其他 React 开发人员这样做）。以组件命名您的组件文件，然后在其底部创建一个默认导出，然后您可以导入该文件的默认导出（将是组件）并在任何您想要的地方使用它。

【讨论】：