使用带有 javascript 导入语法的括号

import React, { Component, PropTypes } from 'react';

这说：

从 中导入名称下的默认导出，然后导入命名导出和以相同的名称导入。'react'ReactComponentPropTypes

这结合了您可能已经看到的两种常见语法

import React from 'react';
import { Component, PropTypes } from 'react';

第一个用于导入和命名默认导出，第二个用于导入指定的命名导出。

作为一般规则，大多数模块将提供单个默认导出或命名导出列表。模块同时提供默认导出和命名导出的情况不太常见。但是，在存在一个最常导入的特征，但也有其他子特征的情况下，将第一个特征导出为默认值，并将其余特征导出为命名导出是一种有效的设计。在这种情况下，您将使用您引用的语法。import

其他答案介于错误和令人困惑之间，可能是因为提出这个问题时的MDN文件是错误的和令人困惑的。MDN展示了这个例子

import name from "module-name";

并表示是“将接收导入值的对象的名称”。但这是误导和不正确的;首先，只有一个导入值，它将被“接收”（为什么不直接说“分配给”或“用于引用”），在这种情况下，导入值是从模块的默认导出。namename

解释这一点的另一种方法是注意，上面的导入与

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";

并声称这意味着

导入整个模块的内容，其中一些内容也被显式命名。这会插入 （原文如此） 和 到当前作用域中。请注意，和 是相同的，就像是和myModulefoobarfoomyModule.foobarmyModule.bar

MDN在这里所说的，以及基于不正确的MDN文档的其他答案所声称的，是绝对错误的，并且可能基于规范的早期版本。这实际上的作用是

导入默认模块导出和一些明确命名的导出。这会将 、 和 插入到当前作用域中。导出名称 foo 和 bar 无法通过 MyModule 访问，MyModule 是默认导出，而不是涵盖所有导出的某个保护伞。MyModulefoobar

（默认模块导出是使用语法导出的值，也可以是 。）export defaultexport {foo as default}

MDN文档编写者可能对以下形式感到困惑：

import * as MyModule from 'my-module';

这将从 导入所有导出，并使其能够以诸如 之类的名称进行访问。默认导出也可以作为 访问，因为默认导出实际上只不过是另一个名为 的命名导出。在此语法中，无法仅导入命名导出的子集，尽管可以导入默认导出（如果有）以及所有命名导出，并my-moduleMyModule.nameMyModule.defaultdefault

import myModuleDefault, * as myModule from 'my-module';

import React, { Component, PropTypes } from 'react'

这将从模块中获取导出的成员，并分别将它们分配给 和 。 将等于模块的导出。{ Component, PropTypes }'react'ComponentPropTypesReactdefault

正如下面的torazaburo所指出的，这与

import { default as React, Component, PropTypes } from 'react'

这是的简写

import { default as React, Component as Component, PropTypes as PropTypes} from 'react'

这是另一个示例（链接到要点）：

// 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 | 

作为参考，您可以从MDN阅读新的导入文档。但是，它显然需要技术审查。Axel Rauschmayer博士的博客文章目前是一个更好的参考。