我遇到了一个使用以下语法导入库的javascript库:
import React, { Component, PropTypes } from 'react';
上面的方法和下面的方法有什么区别?
import React, Component, PropTypes from 'react';
这说:
从名称下导入 默认* 导出,并以相同的名称导入 命名的 导出。'react'``React *Component``PropTypes
'react'``React
Component``PropTypes
这结合了您可能已经看到的两种常见语法
import React from 'react'; import { Component, PropTypes } from 'react';
第一个用于导入和命名默认导出,第二个用于导入指定的命名导出。
通常,大多数模块将提供单个默认导出或命名导出列表。模块同时提供默认导出 和 命名导出的情况要少一些。但是,如果存在一个最常导入的功能,但又包含其他子功能,则将第一个导出为默认值,将其余的导出为命名导出是有效的设计。在这种情况下,您将使用所import引用的语法。
import
其他答案介于错误和令人困惑之间,可能是因为在提出此问题时的MDN文档是错误和令人困惑的。MDN显示了示例
import name from "module-name";
并称为name“将接收导入值的对象的名称”。但这是误导和不正确的。首先,只有 一个 导入值,它将被“接收”(为什么不只是说“分配给”或“用于引用”)name,在这种情况下,导入值是模块的 默认导出 。
name
解释此问题的另一种方法是,请注意上述导入与
import { default as name } from "module-name";
OP的示例与
import { default as React, Component, PropTypes } from 'react';
MDN文档继续显示示例
import MyModule, {foo, bar} from "my-module.js";
并声称这意味着
导入整个模块的内容,其中一些内容也被明确命名。这会将myModule(sic)foo和bar插入当前作用域。请注意,foo和myModule.foo相同,并且bar和myModule.bar
myModule
foo
bar
myModule.foo
myModule.bar
MDN在此处所说的内容以及其他答案基于不正确的MDN文档所声称的观点绝对是错误的,并且可能基于规范的早期版本。这实际上是
导入默认模块导出和一些明确命名的导出。这会将MyModule,foo和bar插入当前范围。 出口名称foo和bar是 不是 访问的通过MyModule,这是 默认的 出口,而不是一些伞覆盖全部出口。
MyModule
(默认的模块导出是使用export default语法导出的值,也可以是export {foo as default}。)
export default
export {foo as default}
MDN文档编写者可能已经将以下表单弄糊涂了:
import * as MyModule from 'my-module';
这将进口所有的出口产品my- module,并以诸如之类的名称进行访问MyModule.name。默认导出也可以通过以下方式访问MyModule.default,因为默认导出实际上只不过是另一个具有名称的命名导出default。用这种语法,虽然只有一个可以导出默认的导出,但是没有方法可以导入默认导出的一个子集,如果有默认导出,则可以导入所有默认导出。
my- module
MyModule.name
MyModule.default
default
import myModuleDefault, * as myModule from 'my-module';