这似乎是显而易见的,但我发现自己有点困惑,什么时候使用花括号导入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中使用花括号来导入单个模块(这显然不是情况,因为我看到过需要花括号的单个导入)。


当前回答

通常当你导出一个函数时,你需要使用{}。

如果你有

export const x

你使用

import {x} from ''

如果你使用

export default const x

你需要使用

import x from ''

这里你可以把X换成任何你想要的变量。

其他回答

为了理解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语句如何工作的简单演示可以在我自己对类似问题的回答中找到,在javascript导入中何时使用“{}”?

花括号仅用于指定export时的import。如果导出为默认值,则导入时不使用花括号。

对于默认导出,我们在导入时不使用{}。

例如,

文件player.js

export default vx;

文件index.js

import vx from './player';

文件index.js

文件player.js

如果我们想导入我们导出的所有东西,那么我们使用*:

如果文件中有任何默认导出,则不需要在import语句中使用花括号。 如果文件中有多个导出,那么我们需要在导入文件中使用花括号,以便我们可以导入必要的内容。 你可以在下面的YouTube视频中找到使用大括号和默认语句的完全区别。 21. ES6模块。使用导入/导出的不同方式,代码中的默认语法。Es6 | es2015