问题：

为什么我需要在ES6中用数字括号{}包装一些导入？[副本]

田远

2023-03-14

我在ES6中发现了一个奇怪的情况。例如，我正在使用npm包react和react-router。我想将它们导入文件：

import React from "react";
import { browserHistory } from "react-router";

奇怪的情况是，我需要将browserHistory包装在图括号中，但我不需要包装React。原因是什么？

import { React } from "react"; // React is undefined
import browserHistory from "react-router"; // browserHistory is undefined

我需要自定义导入的原因是什么？

共有2个答案

齐琦

2023-03-14

如果要导入的模块具有默认导出，则不必使用{}语法来访问给定的导出。必须通过{}语法访问命名（非默认）导出。一个模块可以有一个默认导出以及许多命名导出。

一个例子是React，它是一个默认的导出，但是模块也有一个命名的组件导出。要导入这两个导出，将使用语法：import-React，{Component}from'React'。

孟雪风

2023-03-14

ES6模块区分两种导出：默认导出和其他导出。

每个模块最多可以有一个默认导出。默认导出有点像模块的“主要吸引力”。这应该是你想让模块拥有的东西。所有其他出口都属于其他类别。

因此，一个模块可以有任意数量的导出（甚至零），其中最多有一个可以是默认导出。

在语法的导出侧，默认导出只需在导出关键字后添加一个默认即可标记：

// this is a normal export
export var foo = 'foo';

// this is a default export
var bar = 'bar';
export default bar;

在语法的导入端，这会变得更加复杂：默认导出是在花括号之外导入的。所有其他出口都是在花括号内导入的。

import bar, { foo } from 'some-module';

这将导入模块的默认导出成员为bar，并导入（命名的）其他导出foo。请注意，默认导出没有固定的名称：导出时成员的原始名称并不重要。相反，您在导入它时给它起了一些名字。所以你也可以这样写：

import baz, { foo } from 'some-module';

这仍然会从模块导入相同的默认导出，但会给它一个不同的名称。但是，其他导入需要有正确的名称，因为这是用来识别它们的。但是，您可以使用作为关键字为他们指定不同的名称。

在使用export和import语句时，还有一些事情需要知道。您应该检查MDN以获得它们的完整描述。

共有2个答案