什么时候应该将花括号用于ES6导入？

小编典典

什么时候应该将花括号用于ES6导入？

javascript

这似乎很明显，但是我发现自己对于何时使用花括号在ES6中导入单个模块感到有些困惑。例如，在我正在从事的React-
Native项目中，我具有以下文件及其内容：

initialState.js

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

在TodoReducer.js中，我必须不带花括号将其导入：

import initialState from './todoInitialState';

如果将initialState花括号括起来，则以下代码行将出现以下错误：

无法读取未定义的属性待办事项

TodoReducer.js：

export default function todos(state = initialState.todo, action) {
// ...
}

带有花括号的组件也发生类似的错误。我想知道何时应该为单个导入使用花括号，因为显然，当导入多个组件/模块时，必须将它们括在花括号中，这我知道。

单个模块，或者我绝不应该在ES6中使用大括号来导入单个模块（这显然不是情况，如我所见，需要使用花括号将其导入）

阅读 487

2020-04-25

共1个答案

小编典典

这是 默认导入 ：

// B.js
import A from './A'

仅当A具有 默认导出 时才有效：

// A.js
export default 42

在这种情况下，导入时分配给它的名称无关紧要：

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

因为它会始终解析到任何的是 默认的导出 的A。

这是一个 名为import的导入A：

import { A } from './A'

仅在A包含 名为的命名导出A时才有效：

export const A = 42

在这种情况下，名称很重要，因为您要 通过其导出名称 来导入 特定内容 ：

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

为了使这些工作，你会添加一个 对应的命名出口 到A：

// A.js
export const A = 42
export const myA = 43
export const Something = 44

一个模块只能具有 一个默认导出 ，但可以具有任意数量的 命名导出 （零，一个，两个或多个）。您可以将它们全部一起导入：

// B.js
import A, { myA, Something } from './A'

在这里，我们将默认导出导入为A，并将导出名称分别命名为myA和Something。

// A.js
export default 42
export const myA = 43
export const Something = 44

导入时，我们还可以为它们分配所有不同的名称：

// B.js
import X, { myA as myX, Something as XSomething } from './A'

默认导出通常用于通常希望从模块中获取的内容。命名的出口通常用于方便的实用程序，但并不总是必需的。但是，由您决定如何导出内容：例如，一个模块可能根本没有默认导出。

2020-04-25