使用括号与JavaScript导入语法 [英] using brackets with javascript import syntax

问题描述

我遇到一个使用以下语法导入库的JavaScript库：

  import React，{Component，PropTypes}从'反应' 
  

上述方法与以下方法有什么区别？

  import来自react的React，Component，PropTypes; 
  

解决方案

  import React ，{component，PropTypes}从'react'; 
  

这说：

从反应导入名为 React 的默认导出，导出名为的 c c c>和 PropTypes b $ b

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

  import来自'react'的反应; 
 import {Component，PropTypes} from'react'; 
  

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

作为一般规则，大多数模块将提供单个默认导出或命名导出列表。模块提供名为export的默认导出和稍微不太常见。但是，在最常导入的功能还有其他子功能的情况下，将第一个导出为默认设置是有效的设计，其余的作为命名导出。在这种情况下，您将使用您引用的 import 语法。

其他答案在错误之间可能是因为当时提出这个问题的MDN文件是错误的和令人困惑的。 MDN从module-name中显示例子

  import name 
  

，并说名称是将接收导入值的对象。但这是误导和错误的;首先，只有一个导入值，这将被接收（为什么不只是说分配给或过去参考） name ，此处的导入值是模块中的默认导出。

另一种解释方法是要注意，以上导入与module-name中的

  import {default as name}完全相同; 
  

，OP的示例与

  import {default as React，Component，PropTypes} from'react'; 
  

MDN文档继续显示示例

从my-module.js导入MyModule，{foo，bar};

，并声称这意味着

导入整个模块的内容，还有一些也被明确命名。这插入 myModule （sic）， foo 和 bar 进入当前范围。请注意， foo 和 myModule.foo 是一样的， bar 和 myModule.bar

什么MDN在这里说，什么根据不正确的MDN文档提出的其他答案是完全错误的，可能是基于早期版本的规范。这实际上是

导入默认模块导出和一些明确命名的导出。将 MyModule ， foo 和 bar 插入到当前范围。 foo 和 bar 的导出名称不是可以通过 MyModule ，这是默认的导出，而不是涵盖所有出口的一些伞。

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

MDN文档编写者可能已经对以下表单感到困惑：

'pre> 导入*作为MyModule从'我的模块';


这将从 my-module ，并使它们以诸如 MyModule.name 的名称访问。默认导出也可以作为 MyModule.default 访问，因为默认导出只不过是另一个命名导出，名称为 default 。在这种语法中，没有办法仅导入命名导出的一个子集，尽管可以导入缺省导出（如果有的话）连同所有命名的导出一起导入到

$ b $导入myModuleDefault，*作为myModule从'my-module'; b

I came across a javascript library that uses the following syntax to import libraries:

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

What is the difference between the above method and the following?

import React, Component, PropTypes from 'react';

解决方案

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

This says:

Import the default export from 'react' under the name React and import the named exports Component and PropTypes under the same names.

This combines the two common syntaxes which you've probably seen

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

The first being used to import and name the default export, the second to import the specified named exports.

As a general rule, most modules will either provide a single, default export, or a list of named exports. It is slightly less usual for a module to provide both a default export and named exports. However, in the case where there is one feature which is most commonly imported, but also additional sub-features, it is a valid design to export the first as the default, and the remaining ones as named exports. It is in such cases you would use the import syntax you refer to.

The other answers are somewhere between wrong and confusing, possibly because the MDN documents at the time this question was asked were wrong and confusing. MDN showed the example

import name from "module-name";

and said name is the "name of the object that will receive the imported values." But that's misleading and incorrect; first of all, there is only one import value, which will be "received" (why not just say "assigned to", or "used to refer to") name, and the import value in this case is the default export from the module.

Another way of explaining this is to note that the above import is precisely identical to

import { default as name } from "module-name";

and the OP's example is precisely identical to

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

The MDN documentation went on to show the example

import MyModule, {foo, bar} from "my-module.js";

and claimed that it means

Import an entire module's contents, with some also being explicitly named. This inserts myModule (sic), foo, and bar into the current scope. Note that foo and myModule.foo are the same, as are bar and myModule.bar

What MDN said here, and what other answers claim based on the incorrect MDN documentation, is absolutely wrong, and may be based on an earlier version of the spec. What this actually does is

Import the default module export and some explictly named exports. This inserts MyModule, foo, and bar into the current scope. The export names foo and bar are not accessible via MyModule, which is the default export, not some umbrella covering all exports.

(The default module export is the value exported with the export default syntax, which could also be export {foo as default}.)

The MDN documentation writers may have gotten confused with the following form:

import * as MyModule from 'my-module';

This imports all exports from my-module, and makes them accessible under names such as MyModule.name. The default export is also accessible as MyModule.default, since the default export is really nothing more than another named export with the name default. In this syntax, there is no way to import only a subset of the named exports, although one could import the default export, if there is one, together with all the named exports, with

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

这篇关于使用括号与JavaScript导入语法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！