这似乎是显而易见的,但我发现自己有点困惑,什么时候使用花括号导入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用花括号括起来,我会得到以下代码行的错误:
无法读取未定义的属性todo
文件TodoReducer.js:
export default function todos(state = initialState.todo, action) {
// ...
}
类似的错误也发生在使用花括号的组件上。我想知道什么时候我应该为一个导入使用花括号,因为很明显,当导入多个组件/模块时,你必须用花括号将它们括起来,这是我知道的。
Stack Overflow的帖子在这里没有回答我的问题,相反,我在问什么时候我应该或不应该使用花括号来导入单个模块,或者我不应该在ES6中使用花括号来导入单个模块(这显然不是情况,因为我看到过需要花括号的单个导入)。
这是一个默认的导入:
// 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的默认导出。
这是一个名为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
一个模块只能有一个默认导出,但可以有任意多个命名导出(0个、1个、2个或多个)。你可以把它们一起导入:
// 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'
默认导出通常用于您通常期望从模块中获得的任何内容。命名导出通常用于实用程序,这些实用程序可能很方便,但并不总是必要的。然而,如何导出是由您自己决定的:例如,一个模块可能根本没有默认的导出。
这是ES模块的一个很好的指南,解释了默认导出和命名导出之间的区别。
ES6模块概述:
出口:
您有两种类型的导出:
叫出口
默认导出,每个模块最多导出一个
语法:
// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}
进口:
导出的类型(即命名导出或默认导出)会影响导入内容的方式:
对于命名导出,我们必须使用花括号和确切的名称作为导出的声明(即变量,函数或类)。
对于默认导出,我们可以选择名称。
语法:
// Module B, imports from module A which is located in the same directory
import { importantData_1 , importantData_2 } from './A'; // For our named imports
// Syntax single named import:
// import { importantData_1 }
// For our default export (foo), the name choice is arbitrary
import ourFunction from './A';
感兴趣的事情:
使用花括号内逗号分隔的列表,并与命名导出的匹配导出名称。
使用您选择的不带花括号的名称作为默认导出。
别名:
无论何时你想重命名一个命名导入,这是可能的通过别名。语法如下:
import { importantData_1 as myData } from './A';
现在我们导入了importantData_1,但是标识符是myData而不是importantData_1。