我遇到了一个使用以下语法导入库的 javascript 库:
import React, { Component, PropTypes } from 'react';
上面的方法和下面的有什么区别?
import React, Component, PropTypes from 'react';
我遇到了一个使用以下语法导入库的 javascript 库:
import React, { Component, PropTypes } from 'react';
上面的方法和下面的有什么区别?
import React, Component, PropTypes from 'react';
import React, { Component, PropTypes } from 'react';
这说:
从名称下导入默认导出并以相同名称导入命名导出。
'react'
React
Component
PropTypes
这结合了您可能已经看到的两种常见语法
import React from 'react';
import { Component, PropTypes } from 'react';
第一个用于导入和命名默认导出,第二个用于导入指定的命名导出。
作为一般规则,大多数module将提供单个默认导出或命名导出列表。module提供默认导出和命名导出的情况有点少见。但是,如果有一个最常导入的特征,但还有其他子特征,则将第一个作为默认导出,将其余的作为命名导出导出是有效的设计。在这种情况下,您将使用import
您引用的语法。
其他答案介于错误和混乱之间,可能是因为提出这个问题时的 MDN 文档是错误和混乱的。MDN 展示了示例
import name from "module-name";
并表示name
“将接收导入值的对象的名称”。但这是误导和不正确的;首先,只有一个导入值,它将被“接收”(为什么不直接说“分配给”或“用于引用”)name
,并且在这种情况下导入值是module的默认导出.
解释这一点的另一种方式是注意上述导入与
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";
并声称这意味着
导入整个module的内容,其中一些也被明确命名。这会将
myModule
(sic)、foo
和bar
插入当前范围。请注意,foo
和myModule.foo
是相同的,就像是bar
和myModule.bar
MDN 在这里所说的,以及基于不正确的 MDN 文档的其他答案所声称的,是绝对错误的,并且可能基于规范的早期版本。这实际上是做什么的
导入默认module导出和一些显式命名的导出。这会将
MyModule
、foo
和bar
插入当前范围。出口名称foo
和bar
是不是访问的通过MyModule
,这是默认的出口,而不是一些伞覆盖全部出口。
(默认module导出是使用export default
语法导出的值,也可以是export {foo as default}
.)
MDN 文档作者可能对以下形式感到困惑:
import * as MyModule from 'my-module';
这将从 导入所有导出my-module
,并使它们可以以MyModule.name
. 默认导出也可以访问 as MyModule.default
,因为默认导出实际上只不过是另一个具有 name 的命名导出default
。在这种语法中,没有办法只导入命名导出的一个子集,尽管可以导入默认导出,如果有的话,连同所有命名导出,
import myModuleDefault, * as myModule from 'my-module';
import React, { Component, PropTypes } from 'react'
这将从module中获取导出的{ Component, PropTypes }
成员'react'
并将它们分别分配给Component
和PropTypes
。React
将等于module的default
出口。
import { default as React, Component, PropTypes } from 'react'
这是简写
import { default as React, Component as Component, PropTypes as PropTypes} from 'react'
这是另一个示例(链接到 gist):
// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'
// this uses the new object literal notation in es6
// {myVar} expands to { myVar : myVar }, provided myVar exists
// e.g., let test = 22; let o = {test}; `o` is then equal to { test : 22 }
export default { a, b, d }
// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
{
a : true,
b : 42,
d : 'some property only available from default'
}
*/
// example2.js
import something, { c } from 'myModule'
console.log(something) // same as above; the `default` export
console.log(c) // c === 'hello, world!'
// example3.js
import { a, b, d, default as something } from 'myModule'
console.log(a) // a === true
console.log(b) // b === 42
console.log(d) // d === undefined (we didn't export it individually)
console.log(something.d) // something.d === 'some property...'
我用 babel 测试了第二个例子:
import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)
并出现语法错误。
~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
throw err;
^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
| ^
2 |
3 | console.log(test, test3, test2)
4 |
作为参考,您可以阅读import
MDN的新文档。然而,它显然需要技术审查。Axel Rauschmayer 博士的博客文章现在是更好的参考。