这似乎是显而易见的，但我发现自己有点困惑，什么时候使用花括号导入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中使用花括号来导入单个模块(这显然不是情况，因为我看到过需要花括号的单个导入)。
为了理解import语句中花括号的使用，首先，你必须理解ES6中引入的解构概念
Object destructuring
var bodyBuilder = {
firstname: 'Kai',
lastname: 'Greene',
nickname: 'The Predator'
};
var {firstname, lastname} = bodyBuilder;
console.log(firstname, lastname); // Kai Greene
firstname = 'Morgan';
lastname = 'Aste';
console.log(firstname, lastname); // Morgan Aste
Array destructuring
var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame); // Gran Turismo
Using list matching
var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(secondGame); // Burnout
Using the spread operator
var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame);// Gran Turismo
console.log(rest);// ['Burnout', 'GTA'];
现在我们已经解决了这个问题，在ES6中你可以导出多个模块。然后你可以像下面这样使用对象解构。
让我们假设您有一个名为module.js的模块
export const printFirstname(firstname) => console.log(firstname);
export const printLastname(lastname) => console.log(lastname);
你想把导出的函数导入到index.js;
import {printFirstname, printLastname} from './module.js'
printFirstname('Taylor');
printLastname('Swift');
你也可以像这样使用不同的变量名
import {printFirstname as pFname, printLastname as pLname} from './module.js'
pFname('Taylor');
pLanme('Swift');
为了理解import语句中花括号的使用，首先，你必须理解ES6中引入的解构概念
Object destructuring
var bodyBuilder = {
firstname: 'Kai',
lastname: 'Greene',
nickname: 'The Predator'
};
var {firstname, lastname} = bodyBuilder;
console.log(firstname, lastname); // Kai Greene
firstname = 'Morgan';
lastname = 'Aste';
console.log(firstname, lastname); // Morgan Aste
Array destructuring
var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame); // Gran Turismo
Using list matching
var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(secondGame); // Burnout
Using the spread operator
var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
console.log(firstGame);// Gran Turismo
console.log(rest);// ['Burnout', 'GTA'];
现在我们已经解决了这个问题，在ES6中你可以导出多个模块。然后你可以像下面这样使用对象解构。
让我们假设您有一个名为module.js的模块
export const printFirstname(firstname) => console.log(firstname);
export const printLastname(lastname) => console.log(lastname);
你想把导出的函数导入到index.js;
import {printFirstname, printLastname} from './module.js'
printFirstname('Taylor');
printLastname('Swift');
你也可以像这样使用不同的变量名
import {printFirstname as pFname, printLastname as pLname} from './module.js'
pFname('Taylor');
pLanme('Swift');
