ES6结构和模块导入 [英] ES6 Destructuring and Module imports

问题描述

我的印象是这个语法：

  import'from-feedback-router'; 
 var {Link} =路由器; 
  

具有与此相同的最终结果：

  import {link} from'react-router'; 
  

有人可以解释有什么区别吗？

（我原本以为是 React Router Bug ）。

解决方案

  import'link'from'react-router'; 
  

从反应路由器导入名为export 的 ，即像

  export const Link = 42; 
  

---

  import路由器从反应路由器; 
 const {Link} =路由器; 
  

将链接 strong> default export ，假设它是一个对象，例如

  export default {
链接：42 
}; 
  

（默认导出实际上只是一个名为default的标准化命名导出） / p>

另请参见 export 在MDN上。

完整示例：

  // react-router.js 
 export const Link = 42; 
 export default {
链接：21，
}; 
 
 
 // something.js 
 import {Link} from'./react-router'; 
 import''./react-router'的路由器; 
 const {Link：Link2} =路由器; 
 
 console.log（Link）; // 42 
 console.log（Link2）; // 21 
  

---

与Babel 5及以下我相信它们是可互换的，因为ES6模块已经被泛化到CommonJS。但是就语言而言，这是两种不同的结构。

I was under the impression that this syntax:

import Router from 'react-router';
var {Link} = Router;

has the same final result as this:

import {Link} from 'react-router';

Can someone explain what the difference is?

(I originally thought it was a React Router Bug.)

解决方案

import {Link} from 'react-router';

imports a named export from react-router, i.e. something like

export const Link = 42;

---

import Router from 'react-router';
const {Link} = Router;

pulls out the property Link from the default export, assuming it is an object, e.g.

export default {
  Link: 42
};

(the default export is actually nothing but a standardized named export with the name "default").

See also export on MDN.

Complete example:

// react-router.js
export const Link = 42;
export default {
  Link: 21,
};


// something.js
import {Link} from './react-router';
import Router from './react-router';
const {Link: Link2} = Router;

console.log(Link); // 42
console.log(Link2); // 21

---

With Babel 5 and below I believe they have been interchangeable because of the way ES6 modules have been transpiled to CommonJS. But those are two different constructs as far as the language goes.

这篇关于ES6结构和模块导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！