web-dev-qa-db-fra.com

Différence entre la syntaxe import React et import {Component}

Disons que nous utilisons React avec ES6. Nous importons React et Component en tant que

import React from 'react'
import { Component } from 'react'

Pourquoi la différence de syntaxe? Ne pouvons-nous pas utiliser comme spécifié ci-dessous?

import Component from 'react'
50
prasad.surase

Voici les docs pour import.

import React from 'react'

Ce qui précède est une importation par défaut. Les importations par défaut sont exportées avec export default .... Il ne peut y avoir qu'une seule exportation par défaut.

import { Component } from 'react'

Mais ceci est une importation de membre (nommée importation). Les importations de membres sont exportées avec export .... Il peut y avoir de nombreuses exportations de membres.

Vous pouvez importer les deux en utilisant cette syntaxe:

import React, { Component } from 'react';

En JavaScript, les importations par défaut et nommées sont fractionnées, vous ne pouvez donc pas importer une importation nommée comme si c'était la valeur par défaut. Ce qui suit définit le nom Component sur l'exportation par défaut du package 'react' (qui ne sera pas identique à React.Component:

import Component from 'react';
77
Davin Tryon

Le composant est une exportation nommée. par exemple. Par conséquent, il doit être déstructuré avec {}.

React est une exportation par défaut pour React à partir de 'react' est correct. par exemple. Exporter par défaut Réagir

0
D. Walsh

Si, dans un fichier, vous exportez quelque chose par défaut avec une instruction telle que export default React, vous pouvez l'importer comme import React.

Pour les autres exportations qui ne sont pas par défaut, nous devons spécifier ce que nous voulons réellement importer en le fermant entre parenthèses comme import { Components}.

0
Prakash Sharma