什么时候应该将花括号用于ES6导入?
这似乎很明显,但是我发现自己对于何时使用花括号在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中使用大括号来导入单个模块(这显然不是情况,如我所见,需要使用花括号将其导入)
回答:
这是 :
// B.jsimport A from './A'
仅当A
具有 时才有效:
// A.jsexport default 42
在这种情况下,导入时分配给它的名称无关紧要:
// B.jsimport A from './A'
import MyA from './A'
import Something from './A'
因为它会始终解析到任何的是 的A
。
这是一个 :
import { A } from './A'
仅在A
包含 时才有效:
export const A = 42
在这种情况下,名称很重要,因为您要 来导入 :
// B.jsimport { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!
为了使这些工作,你会添加一个 到A
:
// A.jsexport const A = 42
export const myA = 43
export const Something = 44
一个模块只能具有 ,但可以具有任意数量的 (零,一个,两个或多个)。您可以将它们全部一起导入:
// B.jsimport A, { myA, Something } from './A'
在这里,我们将默认导出导入为A
,并将导出名称分别命名为myA
和Something
。
// A.jsexport default 42
export const myA = 43
export const Something = 44
导入时,我们还可以为它们分配所有不同的名称:
// B.jsimport X, { myA as myX, Something as XSomething } from './A'
默认导出通常用于通常希望从模块中获取的内容。命名的出口通常用于方便的实用程序,但并不总是必需的。但是,由您决定如何导出内容:例如,一个模块可能根本没有默认导出。
以上是 什么时候应该将花括号用于ES6导入? 的全部内容, 来源链接: utcz.com/qa/408571.html