ES6のデストラクチャリングとモジュールインポート

質問

この構文の印象が強かったのですが。

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

は最終的にこれと同じ結果になります。

import {Link} from 'react-router';

何が違うのか、誰か説明してください。

(私はもともと React Routerのバグ .)

どのように解決するのですか？

import {Link} from 'react-router';

をインポートします。 という名前のエクスポート から react-router のようなものです。

export const Link = 42;

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

はプロパティを引き出します。 Link から デフォルトのエクスポート で、それがオブジェクトであると仮定して、例えば

export default {
  Link: 42
};

(デフォルトのエクスポートは、実際には "default"という名前の標準化された名前のエクスポートに過ぎません)。

参照 export MDN 上 .

完全な例です。

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

Babel 5以下では、ES6モジュールがCommonJSにトランスパイルされたため、これらは交換可能であると思います。しかし、言語に関しては、これらは2つの異なる構造です。