javascript - pass - js destructuring support

Desestructuración de ES6 e importaciones de módulos

Question

Tenía la impresión de que esta sintaxis:

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

tiene el mismo resultado final que este:

import {Link} from ''react-router'';

¿Alguien puede explicar cuál es la diferencia?

(Originalmente pensé que era un error React Router ).

Answer 1

Para hacer esto:

import {purple, grey} from ''themeColors'';

Sin repetir la export const para cada símbolo, simplemente haga:

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

Answer 2

import {Link} from ''react-router'';

importa una exportación con nombre desde react-router , es decir, algo como

export const Link = 42;

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

extrae la propiedad Link de la exportación predeterminada , suponiendo que sea un objeto, por ejemplo

export default {
  Link: 42
};

(la exportación predeterminada no es más que una exportación con nombre estandarizada con el nombre "predeterminado").

Ver también export en MDN .

Ejemplo completo:

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

Con Babel 5 y versiones inferiores, creo que han sido intercambiables debido a la forma en que los módulos ES6 se han trasladado a CommonJS. Pero esas son dos construcciones diferentes en lo que respecta al lenguaje.