ES6 Desestructuración e importación de módulos

Question

ES6 Desestructuración e importación de módulos

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';

Puede alguien explicar cuál es la diferencia?

(Originalmente pensé que era un error del router de React.)

41

javascript ecmascript-6 es6-modules destructuring

Author: ftor, 2015-11-04

Source

2 answers

Para hacer esto:

import {purple, grey} from 'themeColors';

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

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

3

Author: Devin G Rhode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-12 21:59:52

score 65 · Accepted Answer

import {Link} from 'react-router';

Importa un llamado export 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 , asumiendo que es un objeto, por ejemplo,

export default {
  Link: 42
};

(la exportación por defecto no es más que una exportación con nombre estandarizado con el nombre "default").

Véase 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 abajo creo que han sido intercambiables debido a la forma en que los módulos ES6 se han transpilado a CommonJS. Pero esas son dos construcciones diferentes en lo que respecta al lenguaje.