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

问题描述

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

initialState.js ：

  var initialState = {
 todo：{
 todos：[
 {id：1，任务：'完成编码'，完成：false}，
 {id：2，任务：'做洗衣'，完成：false}，
 {id：2，任务：'购物杂货' ：false}，
] 
} 
}; 
 
 export defaultState; 
  

在TodoReducer.js 中，我不得不导入没有大括号的：

 从'./todoInitialState'导入initialState; 
  

如果我将curl大括号中的 initialState 对于以下代码行，我收到以下错误：

无法读取未定义的属性todo

TodoReducer.js ：

 导出默认功能todos（state = ** initialstate.todo **，action）{
} 
  

我的组件也出现类似的错误与大括号。我想知道什么时候应该使用花括号进行一次导入，因为显然，当导入多个组件/模块时，你必须将它们包含在我知道的大括号中。

修改：

SO发布在这里不回答我的问题，而是当我 时，我应该或不应该使用花括号来导入单个模块，或者我不应该使用花括号在ES6中导入单个模块（显然不是这样，因为我已经看到单个导入需要花括号）

解决方案

这是一个默认导入：

  / B.js 
从'./A'导入A 
  

只有在 A 具有默认导出：

  / A.js 
 export defa在这种情况下，导入时分配给它的名称并不重要：

p>



  // B.js 
从'./A'导入A 
从'./A导入MyA '
 import 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'// does not work！ 
 import {Something} from'./A'// does not work！要使这些工作正常，您可以将相应的命名导出添加到  code> 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 
导入X，{myA as myX，Something as XSomething} from'./A'
  
 
 
 
 
 
 
默认出口通常用于您通常期望从模块获取的任何内容。命名的出口倾向于用于可能有用的公用事业，但并不总是必需的。但是，由您选择如何导出东西：例如，模块可能根本没有默认导出。
 
 
 
 这是ES模块的一个很好的指南，解释了默认和命名导出之间的区别。 
 
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:

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;
In the TodoReducer.js, I have to import it without curly braces:
import initialState from './todoInitialState';
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.

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)
解决方案
This is a default import:
// B.js
import A from './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'
Because it will always resolve to whatever is the default export of A.



This is a named import called A:
import { A } from './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!
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'
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.

This is a great guide to ES modules, explaining the difference between default and named exports.

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