web-dev-qa-db-fra.com

ES6 Destructuration et importations de modules

J'avais l'impression que cette syntaxe:

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

a le même résultat final que celui-ci:

import {Link} from 'react-router';

Quelqu'un peut-il expliquer quelle est la différence?

(Je pensais à l'origine que c'était un React Router Bug .)

javascriptecmascript-6destructuringes6-modules
50
Guy
import {Link} from 'react-router';

importe une exportation nommée à partir de react-router, c'est-à-dire quelque chose comme

export const Link = 42;

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

extrait la propriété Link de l'exportation par défaut , en supposant qu'il s'agit d'un objet, par exemple.

export default {
  Link: 42
};

(l'exportation par défaut n'est en fait rien d'autre qu'une exportation standardisée nommée avec le nom "default").

Voir aussi export sur MDN .

Exemple complet:

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

Avec Babel 5 et inférieur, je pense qu'ils ont été interchangeables en raison de la façon dont les modules ES6 ont été transposés en CommonJS. Mais ce sont deux constructions différentes en ce qui concerne le langage.

76
Felix Kling

Pour faire ça:

import {purple, grey} from 'themeColors';

Sans répéter export const pour chaque symbole, faites simplement:

export const
  purple = '#BADA55',
  grey = '#l0l',
  gray = grey,
  default = 'this line actually causes an error';
4
Devin G Rhode