javascript - 什么时候应该将花括号用于ES6导入？(When should I use curly braces for ES6 import?)

Question

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.(这似乎很明显，但是我发现自己对于何时使用花括号在ES6中导入单个模块感到有些困惑。)

For example, in the React-Native project I am working on, I have the following file and its content:(例如，在我正在从事的React-Native项目中，我具有以下文件及其内容：) initialState.js (initialState.js) import initialState from './todoInitialState'; In the TodoReducer.js, I have to import it without curly braces:(在TodoReducer.js中，我必须不带花括号将其导入：) import initialState from './todoInitialState'; If I enclose the initialState in curly braces, I get the following error for the following line of code:(如果将initialState用花括号括起来，则以下代码行将出现以下错误：) Cannot read property todo of undefined(无法读取未定义的属性待办事项) TodoReducer.js: (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.(我想知道何时应该对大括号使用一次大括号，因为显然，当导入多个组件/模块时，必须将它们括在大括号中，这我知道。) Edit:(编辑：) The SO 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)(此处的SO帖子没有回答我的问题，而是我在询问何时应该或不应该使用大括号来导入单个模块，或者我绝不应该在ES6中使用大括号来导入单个模块（这显然不是情况，如我所见，需要带花括号的单个导入）)   ask by TonyGW translate from so

Answer 1

This is a default import :(这是默认导入 ：)

// B.js import A from './A' It only works if A has the default export :(仅当A具有默认导出时才有效：) // 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' Because it will always resolve to whatever is the default export of A .(因为它将始终解析为A的默认导出 。) This is a named import called A :(这是一个名为A的命名导入 ：) import { A } from './A' It only works if A contains a named export called A :(它只能当A包含一个名为叫出口的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! To make these work, you would add a corresponding named export to A :(为了使这些工作，您可以在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' Here, we import the default export as A , and named exports called myA and Something , respectively.(在这里，我们将默认导出导入为A ，并将导出分别命名为myA和Something 。) // 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.(但是，由您决定如何导出内容：例如，一个模块可能根本没有默认导出。) This is a great guide to ES modules, explaining the difference between default and named exports.(这是ES模块的出色指南，解释了默认导出和命名导出之间的区别。)