usando corchetes con sintaxis de importación de javascript

Nuestro team de especialistas pasados varios días de trabajo y de recopilar de información, dimos con la solución, queremos que todo este artículo sea de gran utilidad en tu plan.

Solución:

import React,  Component, PropTypes  from 'react';

Esto dice:

Importar el por defecto exportar desde 'react' bajo el nombre React e importar el llamado exportaciones Component y PropTypes bajo los mismos nombres.

Esto combina las dos sintaxis comunes que probablemente hayas visto

import React from 'react';
import  Component, PropTypes  from 'react';

El primero se usa para importar y nombrar la exportación predeterminada, el segundo para importar las exportaciones nombradas especificadas.

Como regla general, la mayoría de los módulos proporcionarán una única exportación predeterminada o una lista de exportaciones con nombre. Es algo menos habitual que un módulo proporcione una exportación predeterminada y exportaciones nombradas. Sin embargo, en el caso de que haya una característica que se importe con más frecuencia, pero también subcaracterísticas adicionales, es un diseño válido exportar la primera como predeterminada y las restantes como exportaciones con nombre. Es en tales casos que usaría el import sintaxis a la que se refiere.

Las otras respuestas están en algún lugar entre incorrectas y confusas, posiblemente porque los documentos de MDN en el momento en que se hizo esta pregunta eran incorrectos y confusos. MDN mostró el ejemplo

import name from "module-name";

y dijo name es el “nombre del objeto que recibirá los valores importados”. Pero eso es engañoso e incorrecto; en primer lugar, sólo hay una valor de importación, que será “recibido” (por qué no simplemente decir “asignado a” o “usado para referirse a”) namey el valor de importación en este caso es el exportación predeterminada del módulo.

Otra forma de explicar esto es notar que la importación anterior es exactamente idéntica a

import  default as name  from "module-name";

y el ejemplo de OP es exactamente idéntico a

import  default as React, Component, PropTypes  from 'react';

La documentación de MDN pasó a mostrar el ejemplo.

import MyModule, foo, bar from "my-module.js";

y afirmó que significa

Importe el contenido de un módulo completo, y algunos también se nombran explícitamente. Esto inserta myModule (sic), fooy bar en el alcance actual. Tenga en cuenta que foo y myModule.foo son los mismos, como son bar y myModule.bar

Lo que MDN dijo aquí, y lo que afirman otras respuestas basadas en la documentación incorrecta de MDN, es absolutamente incorrecto y puede estar basado en una versión anterior de la especificación. Lo que esto realmente hace es

Importe la exportación del módulo predeterminado y algunas exportaciones con nombres explícitos. Esto inserta MyModule, fooy bar en el alcance actual. Los nombres de exportación foo y bar están no accesible a través de MyModuleCuál es el por defecto exportación, no un paraguas que cubra todas las exportaciones.

(La exportación del módulo por defecto es el valor exportado con el export default sintaxis, que también podría ser export foo as default.)

Los escritores de documentación de MDN pueden haberse confundido con el siguiente formulario:

import * as MyModule from 'my-module';

Esto importa todas las exportaciones de my-moduley los hace accesibles con nombres como MyModule.name. También se puede acceder a la exportación predeterminada como MyModule.defaultya que la exportación predeterminada no es más que otra exportación con el nombre default. En esta sintaxis, no hay forma de importar solo un subconjunto de las exportaciones nombradas, aunque se podría importar la exportación predeterminada, si la hay, junto con todas las exportaciones nombradas, con

import myModuleDefault, * as myModule from 'my-module';

import React,  Component, PropTypes  from 'react'

Esto tomará el exportado Component, PropTypes miembros de la 'react' módulo y asignarlos a Component y PropTypesrespectivamente. React será igual a la del módulo default exportar.

Como lo señala torazaburo a continuación, esto es lo mismo que

import  default as React, Component, PropTypes  from 'react'

que es la abreviatura de

import  default as React, Component as Component, PropTypes as PropTypes from 'react'

Aquí hay otro ejemplo (enlace a la esencia):

// myModule.js
export let a = true
export let b = 42
export let c = 'hello, world!'
// `d` is not exported alone
let d = 'some property only available from default'

// this uses the new object literal notation in es6
// myVar expands to  myVar : myVar , provided myVar exists
// e.g., let test = 22; let o = test; `o` is then equal to  test : 22 
export default  a, b, d 

// example1.js
import something from 'myModule'
console.log(something)
// this yields (note how `c` is not here):
/*
  
    a : true,
    b : 42,
    d : 'some property only available from default'
  
*/

// example2.js
import something,  c  from 'myModule'
console.log(something)  // same as above; the `default` export
console.log(c)          // c === 'hello, world!'

// example3.js
import  a, b, d, default as something  from 'myModule'
console.log(a)            // a === true
console.log(b)            // b === 42
console.log(d)            // d === undefined (we didn't export it individually)
console.log(something.d)  // something.d === 'some property...'

---

Probé el segundo ejemplo con babel:

import test, test3, test2 from './app/lib/queries.js'
console.log(test, test3, test2)

y obtuve un error de sintaxis.

~/code/repo/tutoring $ babel-node test.js
/Users/royhowie/.node/lib/node_modules/babel/node_modules/babel-core/lib/babel/transformation/file/index.js:601
      throw err;
            ^
SyntaxError: /Users/royhowie/code/repo/tutoring/test.js: Unexpected token (1:13)
> 1 | import test, test3, test2 from './app/lib/queries.js'
    |              ^
  2 | 
  3 | console.log(test, test3, test2)
  4 | 

---

Como referencia, puede leer sobre el nuevo import documentación de MDN. Sin embargo, aparentemente necesita una revisión técnica. La publicación del blog del Dr. Axel Rauschmayer es una mejor referencia por ahora.

Si te gustó nuestro trabajo, tienes la habilidad dejar una reseña acerca de qué le añadirías a este tutorial.

---

---

Utiliza Nuestro Buscador