import React, { Component, PropTypes } from 'react';
Cela dit:
Importez l' exportation par défaut de 'react'
sous le nom React
et importez les exportations nomméesComponent
et PropTypes
sous les mêmes noms.
Cela combine les deux syntaxes courantes que vous avez probablement vues
import React from 'react';
import { Component, PropTypes } from 'react';
Le premier étant utilisé pour importer et nommer l'exportation par défaut, le second pour importer les exportations nommées spécifiées.
En règle générale, la plupart des modules fourniront soit une seule exportation par défaut, soit une liste d'exportations nommées. Il est un peu moins habituel pour un module de fournir à la fois une exportation par défaut et des exportations nommées. Cependant, dans le cas où il existe une fonctionnalité qui est le plus souvent importée, mais également des sous-fonctionnalités supplémentaires, il est possible d'exporter la première par défaut et les autres en tant qu'exportations nommées. C'est dans ce cas que vous utiliserez la import
syntaxe à laquelle vous faites référence.
Les autres réponses sont quelque part entre fausses et déroutantes, peut-être parce que les documents MDN à l'époque où cette question a été posée étaient faux et déroutants. MDN a montré l'exemple
import name from "module-name";
et dit name
est le "nom de l'objet qui recevra les valeurs importées". Mais c'est trompeur et incorrect; tout d'abord, il n'y a qu'une seule valeur d'importation, qui sera "reçue" (pourquoi ne pas simplement dire "assignée à", ou "utilisée pour faire référence à") name
, et la valeur d'importation dans ce cas est l' exportation par défaut du module .
Une autre façon d'expliquer cela est de noter que l'importation ci-dessus est exactement identique à
import { default as name } from "module-name";
et l'exemple de l'OP est exactement identique à
import { default as React, Component, PropTypes } from 'react';
La documentation MDN a continué pour montrer l'exemple
import MyModule, {foo, bar} from "my-module.js";
et a affirmé que cela signifie
Importez le contenu d'un module entier, certains étant également explicitement nommés. Cela insère myModule
(sic) foo
, et bar
dans la portée actuelle. Notez que foo
et myModule.foo
sont les mêmes, que sont bar
etmyModule.bar
Ce que MDN a dit ici, et ce que d'autres réponses prétendent sur la base d'une documentation MDN incorrecte, est absolument faux et peut être basé sur une version antérieure de la spécification. Ce que cela fait réellement, c'est
Importez l'exportation du module par défaut et certaines exportations nommées explicitement. Cela insère MyModule
, foo
et bar
dans la portée actuelle. Les noms d'exportation foo
et nebar
sont pas accessibles viaMyModule
, qui est l' exportation par défaut , pas un parapluie couvrant toutes les exportations.
(L'exportation de module par défaut est la valeur exportée avec la export default
syntaxe, ce qui pourrait également l'être export {foo as default}
.)
Les rédacteurs de la documentation MDN peuvent avoir été confondus avec le formulaire suivant:
import * as MyModule from 'my-module';
Cela importe toutes les exportations de my-module
et les rend accessibles sous des noms tels que MyModule.name
. L'exportation par défaut est également accessible en tant que MyModule.default
, puisque l'exportation par défaut n'est en réalité rien de plus qu'une autre exportation nommée avec le nom default
. Dans cette syntaxe, il n'y a aucun moyen d'importer uniquement un sous-ensemble des exportations nommées, bien que l'on puisse importer l'exportation par défaut, s'il y en a une, avec toutes les exportations nommées, avec
import myModuleDefault, * as myModule from 'my-module';