什么时候应该使用花括号进行 ES6 导入? [英] When should I use curly braces for ES6 import?

问题描述

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

It seems to be obvious, but I found myself a bit confused about when to use curly braces for importing a single module in ES6. For example, in the React-Native project I am working on, I have the following file and its content:

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 中，我必须不带花括号导入它:

In the TodoReducer.js, I have to import it without curly braces:

import initialState from './todoInitialState';

如果我将 initialState 括在花括号中，我会收到以下代码行的以下错误:

If I enclose the initialState in curly braces, I get the following error for the following line of code:

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

Cannot read property todo of undefined

文件 TodoReducer.js:

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

类似的错误也发生在我的带花括号的组件上.我想知道什么时候应该对单个导入使用花括号，因为很明显，当导入多个组件/模块时，你必须将它们括在花括号中，我知道.

Similar errors also happen to my components with the curly braces. I was wondering when I should use curly braces for a single import, because obviously, when importing multiple component/modules, you have to enclose them in curly braces, which I know.

此处上的 Stack Overflow 帖子没有回答我的问题，而是我问什么时候我应该或不应该使用花括号导入单个模块，或者我永远不应该使用花括号导入 ES6 中的单个模块(这显然是事实并非如此，因为我已经看到需要花括号的单个导入).

The Stack Overflow post at here does not answer my question, instead I am asking when I should or should not use curly braces for importing a single module, or I should never use curly braces for importing a single module in ES6 (this is apparently not the case, as I have seen single import with curly braces required).

推荐答案

这是一个默认导入:

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

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

It only works if A has the default export:

// A.js
export default 42

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

In this case it doesn’t matter what name you assign to it when importing:

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

因为它总是会解析为A的默认导出.

Because it will always resolve to whatever is the default export of A.

这是一个名为A的命名导入:

This is a named import called A:

import { A } from './A'

仅当 A 包含名为 A 的命名导出时才有效:

It only works if A contains a named export called A:

export const A = 42

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

In this case the name matters because you’re importing a specific thing by its export name:

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

要使这些工作，您需要在 A 中添加一个相应命名的导出:

To make these work, you would add a corresponding named export to A:

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

<小时>

一个模块只能有一个默认导出，但可以有任意数量的命名导出(零、一个、两个或多个).您可以将它们全部导入:

---

A module can only have one default export, but as many named exports as you'd like (zero, one, two, or many). You can import them all together:

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

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

Here, we import the default export as A, and named exports called myA and Something, respectively.

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

我们还可以在导入时为它们分配不同的名称:

We can also assign them all different names when importing:

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

<小时>

默认导出往往用于您通常期望从模块中获得的任何内容.命名导出往往用于可能很方便但并不总是必要的实用程序.但是，您可以选择如何导出内容:例如，一个模块可能根本没有默认导出.

---

The default exports tend to be used for whatever you normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to you to choose how to export things: for example, a module might have no default export at all.

这是一个很好的 ES 模块指南，解释了 default 和和命名导出.

这篇关于什么时候应该使用花括号进行 ES6 导入?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！