2017-01-20 4 views
22

Скажем, мы используем React with ES6. Мы импортируем Реакт и Компонент какРазница между синтаксисом импорта и импорта {Компонент}

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

Почему разница в синтаксисе? Не можем ли мы использовать, как указано ниже?

import Component from 'react' 
+0

Также дубликат [Когда я должен использовать фигурные скобки для импорта ES6?] (Http://stackoverflow.com/q/36795819/218196) –

+1

Когда вы импортируете из библиотеки React, вы должны импортировать React следующим образом: ' import React from 'react'' Поскольку React - это экспорт по умолчанию. С другой стороны, Component помещается в фигурные скобки, потому что он является дополнительным. Необязательный импорт из библиотеки помещается в фигурные скобки –

ответ

37

Вот docs для import.

import React from 'react' 

Вышеприведенный импорт по умолчанию. Импорт по умолчанию экспортируется с export default .... Может существовать только один экспорт по умолчанию.

import { Component } from 'react' 

Но это импорт элемента (с именем import). Импорт участников экспортируется с export .... Там может быть много экспорта участников.

Вы можете импортировать как с помощью этого синтаксиса:

import React, { Component } from 'react'; 

В JavaScript по умолчанию и именованные импорта разделены, так что вы не можете импортировать именованный импорта, как это было по умолчанию. Далее, задает имя Component для экспорта по умолчанию для 'react' пакета (который не собирается быть таким же, как React.Component:.

import Component from 'react'; 
+0

В строке «import Component from« реагировать »;», не собираетесь ли вы просто вызвать «Component» экспорт по умолчанию «реагировать»? Другими словами, Component является объектом React, экспортированным по умолчанию из модуля «response», а не null. Я имею в виду, что экспорт по умолчанию не является именованным экспортом, поэтому имя не имеет значения. – Josmar

+1

@ Josmar да, я вижу, как я не очень хорошо это сказал. сделал редактирование. :) –

+0

Вы забыли упомянуть, что React не имеет экспорта по умолчанию, поэтому код не будет работать, если вы не используете хакерскую настройку Babel ... –

0

компонент является именованным экспорт, например, Таким образом, он должен быть деструктурированный с {} .

реагировать является экспорт по умолчанию для React от «реагировать» правильно. например, экспорт по умолчанию реагировать

+1

Чтобы уточнить, нет такой вещи, как разрушение импорта. Синтаксически это похоже, но есть некоторые интересные отличия. Kent C Dodds [написал интересное сообщение] (https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0) об этом –

0

Если в какой-либо файл, который вы экспортируете что-то по умолчанию с утверждением, как «экспорт по умолчанию React», то это может быть импортированный как «импортный ответ».

Для других экспонатов, которые не являются стандартными, нам необходимо указать, что мы хотим импортировать, закрыв это в скобках, таких как «import {Components}».

Смежные вопросы