web-dev-qa-db-fra.com

Qu'est-ce que l'utilisation des accolades dans l'instruction d'importation ES6?

Je peux voir qu'il y a deux manières différentes d'importer

import React from 'react'
import { render } from 'react-dom'

le second a des crochets. Alors, quelle est la différence entre les deux? et quand devrais-je ajouter des crochets? Merci

reactjsredux
16
Benjamin Li

Eh bien, la différence entre importer ou non vos composants within brackets or without it réside dans la façon dont vous export le.

Il y a deux types d'exportations

  1. Export par défaut
  2. Exportation de noms

Un composant peut avoir des exportations one default export and zero or more named

Si un composant est une exportation par défaut, vous devez l'importer sans crochets E.g.

export default App;

L'importer comme

import App from './path/to/App';

Une exportation nommée pourrait ressembler à

export const A = 25;

ou 

export {MyComponent};

Vous pouvez l'importer en tant que

import {A} from './path/to/A';

ou

import {A as SomeName} from './path/to/A';

Si votre composant comporte une exportation par défaut et peu d’export nommés, vous pouvez même les mélanger lors de l’importation.

import App, {A as SomeName} from './path/to/file';

De même, dans le cas de react et react-dom, React et ReactDOM sont respectivement default exports alors que, par exemple, Component est un named export dans react et render est un export nommé dans react-dom. C’est la raison pour laquelle vous pouvez faire 

import ReactDOM from 'react-dom';

et ensuite utiliser 

ReactDOM.render()

ou utilisez-le comme mentionné dans votre question.

26
Shubham Khatri

Considérez primitives.js,

export default (a, b) => a + b;
export const sub = (a, b) => a - b;
export const sqr = a => a**2;

il peut être importé comme ça,

import sum, { sub, sqr } from './primitives';

Dans ce cas, sum est appelé une "exportation par défaut" et un module peut contenir une seule "exportation par défaut". 

sub et sqr sont appelés "exportation nommée" et un module peut contenir plusieurs exportations nommées.

1
Shakil

Les accolades sont utilisées pour importer single(specific) property, alors que Le mot sans accolades est importentire object à partir du fichier.

Par exemple., 

import React, { Component } from 'react';

Ici, le mot React représente d'importer entire object à partir du fichier 'react'

{Component} signifie que nous spécifions d'importer le particular property à partir du fichier. 

0
Arul

Pas besoin d'ajouter un support si vous exportez par défaut. vous ne pouvez avoir que des valeurs par défaut dans le module.

cas 1:

fonction par défaut d'exportation (num1, num2) { renvoyer num1 + num2; }

cas2:

fonction sum (num1, num2) { renvoyer num1 + num2; }

export {somme par défaut};

cas3: 

fonction sum (num1, num2) { renvoyer num1 + num2; }

somme par défaut d'exportation;

vous pouvez importer la valeur par défaut

somme d'importation de "./test.js";

console.log (somme (1, 2));

0
Khalid Azam