Javascript 我将如何导入这些es6导出？它们是命名为导出还是默认？

我正在查看Material UI项目中的代码，该项目似乎导出了一系列组件：

src/Dialog/index.js

：

export { default } from './Dialog';
export { default as DialogActions } from './DialogActions';
export { default as DialogTitle } from './DialogTitle';
export { default as DialogContent } from './DialogContent';
export { default as DialogContentText } from './DialogContentText';
export { default as withResponsiveFullScreen } from './withResponsiveFullScreen';

---

如果我试图修改这些，导入语句会是什么样子？他们是否导入模块并在同一行上导出？为什么不直接使用

导出默认对话框

语法

这与导入和命名导出基本相同

这个片段：

export { default as DialogActions } from './DialogActions';

大致相当于：

import DialogActions from './DialogActions';
export DialogActions;

如果您想在文件中使用它，可以使用命名导入，如下所示：

import { DialogActions } from './src/Dialog/index.js'

---

是的，它允许您使用单个

export

语句导入和重新导出模块，它是babel

stage-1

预设的一部分，称为

---

export default from./Dialog'

也有效，请参见：

index.js

是“魔法”，意思是“导出此目录”。这允许您将一组相关的内容分组到一个目录中，并能够直接从dir路径导入。在您的示例中，它有一个默认导出

对话框

，其他导出为命名导出。因此，您可以导入以下内容：

import Dialog, { DialogTitle, DialogContent } from `path/to/DialogModule`

这比没有

index.js

更好用：

import Dialog from 'path/to/DialogModule/Dialog/Dialog'
import Dialog from 'path/to/DialogModule/DialogTitle/DialogTitle'
import Dialog from 'path/to/DialogModule/DialogContent/DialogContent'

这也是一种方便的方式，可以指定该模块的用户想要公开的内容。目录中可能还有50个其他文件，这些文件在从

path/to/DialogModule

导入时不可见如果

index.js

是npm模块的主要导出，这一点特别有用。只有这些导出才会显示到使用该模块的另一个项目中（

import

able）。在同一个目录中可能有许多其他的东西，他们不打算为用户提供

例如，文件结构可以是：

DialogModule/
├── actions.js
├── Dialog
│   ├── Dialog.css
│   ├── Dialog.js
│   ├── Dialog.test.js
│   └── index.js
├── DialogActions
│   ├── DialogActions.css
│   ├── DialogActions.js
│   ├── DialogActions.test.js
│   └── index.js
├── DialogContent
│   ├── DialogContent.css
│   ├── DialogContent.js
│   ├── DialogContent.test.js
│   └── index.js
├── DialogContentText
│   ├── DialogContentText.css
│   ├── DialogContentText.js
│   ├── DialogContentText.test.js
│   └── index.js
├── DialogTitle
│   ├── DialogTitle.css
│   ├── DialogTitle.js
│   ├── DialogTitle.test.js
│   └── index.js
├── index.js
├── SecretComponent1
│   ├── index.js
│   ├── SecretComponent1.css
│   ├── SecretComponent1.js
│   └── SecretComponent1.test.js
├── SecretComponent2
│   ├── index.js
│   ├── SecretComponent2.css
│   ├── SecretComponent2.js
│   └── SecretComponent2.test.js
├── util
└── util.test.js

---

要从“/Dialog/index”导入{DialogActions，DialogTitle，DialogContent}之类的操作？@NanduKalidindi是的，这就是我感到困惑的地方。为什么要将这些作为命名导出导入（使用

{

）如果我们导出的是

默认值

？您始终可以使用

从导入对话框操作。

，但可能他们决定公开单个文件中的所有导出，以便最终用户更容易进行多个模块导入，而不必编写多个导入语句。是的，这就是我感到困惑的地方。为什么我们将这些作为命名导出导入（使用

{

）如果我们正在导出一个

默认的

模块，如您提供的代码片段中所示：

从“/DialogActions”导入DialogActions；导出DialogActions；

对我来说，这看起来像是他们的一个设计选择，这样您就可以

从“…”导入*一个文件来获得所有这些导出，而不是每个文件都导入如果模块包含副作用，uld也要确保正确的模块加载顺序，但我认为这里不是这样。所以这就是我困惑的地方：-
DialogActions
是默认导出，但我必须将其作为命名导出导入？
import{DialogActions}from./src/Dialog/index.js'