Именованный импорт в React

Question

В этой строке:

import React, { Component } from "react";

почему фигурные скобки находятся только вокруг компонента, а не в 'React'?

Answer 1

Для создания чего-то подобного в реакции.Давайте рассмотрим следующий пример.

someobject.js

const someobject = {
   somefunc1: ()=>console.log("hello 1"),
   somefunc2: ()=>console.log("hello 2")
}

export default someobject;

app.js

import someobject, { somefunc1, somefunc2 } from "./someobject";

someobject.somefunc1(); //hello 1
someobject.somefunc2(); //hello 2
somefunc1(); //hello 1
somefunc2(); //hello 2

экспорт по умолчанию

Answer 2

React - это модуль, содержащий различные методы. При использовании только слова React вы импортируете весь модуль, поэтому вы можете использовать React.Component (в данном случае точечная нотация указывает на метод внутри модуля).

Так, если вам нужно импортировать метод?вы будете использовать брекеты, почему?потому что вы импортируете метод между многими методами в одном модуле, так что он может увеличиваться и уменьшаться, поэтому вы можете импортировать {a, b, c, r, w, q}, это методы внутри одного класса или одного модуля, так что вы можете видеть, чтоесли вы используете

import {Component} from 'react';

Теперь вы можете использовать прямое слово компонента без ссылки на точку, например response.component.

Итак, модуль React экспортируется по умолчанию, здесь мне нужен весь модуль React и ябудет использовать его со всеми методами, {Component} здесь экспортируется по имени, мне нужен конкретный метод из библиотеки React, не все реагируют с библиотекой

, и, пожалуйста, проверьте также Когда мне следует использовать фигурные скобки для импорта ES6?

Answer 3

Это связано с тем, что модулем экспорта по умолчанию в библиотеке реагирования является React, и экспорт по умолчанию может быть только один, даже если вы можете экспортировать многие другие компоненты, но по умолчанию может использоваться только один.Другие компоненты библиотеки React затем могут быть деструктурированы.

Answer 4

В модуле React экспорт по умолчанию является объектом React, и он также имеет именованный экспорт Component ¹ , что-то вроде этого:

// assuming React and Component are predefined
export default React
export Component

По совпадению Component также доступен для объекта React, поэтому нет необходимости импортировать его отдельно, хотя некоторые люди предпочитают ваш подход.Например, это возможно:

// MyComponent.js
import React from 'react'

class MyComponent extends React.Component {}

Более подробную информацию о синтаксисе модуля ES6 можно найти здесь .

¹ Обратите внимание, что на самом деле Reactбиблиотека не имеет именованного экспорта Component, как в примере выше, однако Component является свойством при экспорте по умолчанию , и поэтому из-за способа, которым пакеты ES6 передаются Babel, это становитсяименованный экспорт, тогда поведение будет таким же, как в примере выше.

Answer 5

Импортировать реакцию будет импортировать пакет реакции по умолчанию, компонент с фигурными скобками затем указывает конкретный элемент пакета React.Для реакции по умолчанию не нужны скобки, поскольку это пакет импорта по умолчанию.

import React, { Component } from "react";

Надеюсь, это поможет

Answer 6

Вот отличный ответ , который объясняет импорт по умолчанию и имена в ES6

Допустим, у нас есть класс с именем Foo, который я хочу импортировать.Если я хочу получить экспорт по умолчанию, я бы сделал:

import Foo from './foo.js';

Если бы я хотел определенную функцию внутри файла foo, я бы использовал фигурные скобки.

import { fooFunction } from './foo.js';

ПримечаниеЭто не функция React, а ES6.Вероятно, вы используете babel для переноса кода из ES6 в ES5.