什么时候应该将花括号用于ES6导入?

JavaScript

村村老丝

2020-03-11

这似乎很明显,但是我发现自己对于何时使用花括号在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) {
// ...
}

带有花括号的组件也发生类似的错误。我想知道何时应该为单个导入使用花括号,因为显然,当导入多个组件/模块时,必须将它们括在花括号中,这我知道。

编辑:

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)

第643篇《什么时候应该将花括号用于ES6导入?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
西里伽罗 2020.03.11

花括号在命名导出时仅用于导入。如果默认为导出,则不使用花括号导入。

Harry小小 2020.03.11

花括号({})用于导入命名绑定,其背后的概念是破坏分配

在我自己何时在javascript导入中使用“ {}”对类似问题的答案中,可以找到关于import语句如何与示例一起使用的简单演示

斯丁米亚Green 2020.03.11

通常,在导出函数时,您需要使用{}

if you have export const x 

你用 import {x} from ''

if you use export default const x 

您需要在import X from '' 这里使用,您可以将X更改为所需的任何变量

路易Pro 2020.03.11

TL; DR:如果要导入非默认导出,请使用大括号。

有关更多详细信息,请参见上面的Dan Abramovs答案。

Tom阳光 2020.03.11

我要说还有import值得一提ES6关键字的星号

在此处输入图片说明

如果您尝试控制台混合日志:

import * as Mix from "./A";
console.log(Mix);

你会得到:

在此处输入图片说明

什么时候应该将花括号用于ES6导入?

当您仅需要模块中的特定组件时,括号是金色的,这对于诸如webpack的捆绑器来说,占用的空间较小。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android