Импорт и экспорт компонентов

Файл корневого компонента

В Вашем первом компоненте вы создали компонент Profile и компонент Gallery, который его отображает:

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

В настоящее время они находятся в файле корневого компонента, названном App.js в этом примере. Однако в зависимости от вашей настройки корневой компонент может находиться в другом файле. Если вы используете фреймворк с маршрутизацией на основе файлов, например, Next.js, ваш корневой компонент будет отличаться для каждой страницы.

Экспорт и импорт компонента

Что если в будущем вы захотите изменить стартовую страницу и разместить там список научных книг? Или разместить все профили где-то еще? Имеет смысл вынести Gallery и Profile из файла корневого компонента. Это сделает их более модульными и пригодными для повторного использования в других файлах. Вы можете переместить компонент в три шага:

1. Создайте новый JS-файл для размещения компонентов.
2. Экспортируйте ваш функциональный компонент из этого файла (используя экспорт по умолчанию или именованный экспорт).
3. Импортируйте его в файл, где вы будете использовать компонент (используя соответствующий метод для импорта по умолчанию или именованный экспорт).

Здесь как Profile так и Gallery были перемещены из App.js в новый файл, названный Gallery.js. Теперь вы можете изменить App.js на импорт Gallery из Gallery.js.

import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}

Обратите внимание, как этот пример теперь разделён на два файла компонентов:

1. Gallery.js:
   • Определяет компонент Profile, который используется только внутри того же файла и не экспортируется.
   • Экспортирует компонент Gallery как экспорт по умолчанию.
2. App.js:
   • Импортирует Gallery как импорт по умолчанию из Gallery.js.
   • Экспортирует корневой компонент App как экспорт по умолчанию.

import Gallery from './Gallery';

Глубокое погружение

Экспорт по умолчанию против именованных экспортов

Существует два основных способа экспорта значений с помощью JavaScript: экспорт по умолчанию и именованные экспорт. До сих пор наши примеры использовали только экспорт по умолчанию. Но вы можете использовать один или оба из них в одном файле. Файл может иметь не более одного экспорта по умолчанию, но он может иметь столько именованных экспортов, сколько вам нужно.

Способ экспорта компонента определяет, как его необходимо импортировать. Вы получите ошибку, если попытаетесь импортировать экспорт по умолчанию так же, как вы бы импортировали именованный экспорт! Эта таблица поможет вам отслеживать:

Синтаксис	Оператор экспорта	Оператор импорта
По умолчанию	export default function Button() {}	import Button from './Button.js';
Именованный	export function Button() {}	import { Button } from './Button.js';

Когда вы пишете импорт по умолчанию, вы можете вставить любое имя после import. Например, вы могли бы написать import Banana from './Button.js' и это всё равно дало бы вам тот же экспорт по умолчанию. В отличие от импортов с именами, имя должно совпадать с обеих сторон. Вот почему они называются именованными импортами!

Люди часто используют экспорт по умолчанию, если файл экспортирует только один компонент, и используют именованные экспорт, если он экспортирует несколько компонентов и значений. Независимо от того, какой стиль кодирования вы предпочитаете, всегда присваивайте осмысленные имена функциям ваших компонентов и файлам, которые их содержат. Компоненты без имён, такие как export default () => {}, не рекомендуются, потому что они усложняют отладку.

Экспорт и импорт нескольких компонентов из одного файла

Что если вам нужно показать только один Profile вместо галереи? Вы можете экспортировать и компонент Profile тоже. Но Gallery.js уже имеет экспорт по умолчанию, и у вас не может быть двух экспортов по умолчанию. Вы могли бы создать новый файл с экспортом по умолчанию, или вы могли бы добавить именованный экспорт для Profile. Файл может иметь только один экспорт по умолчанию, но он может иметь множество именованных экспортов!

Сначала экспортируйте Profile из Gallery.js с помощью именованного экспорта (без ключевого слова default)

export function Profile() {
  // ...
}

Затем, импортируйте Profile из Gallery.js в App.js с помощью именованного импорта (с фигурными скобками):

import { Profile } from './Gallery.js';

Наконец, отобразите <Profile /> из компонента App.

export default function App() {
  return <Profile />;
}

Теперь Gallery.js содержит два экспорта: экспорт по умолчанию Gallery и именованный экспорт Profile. App.js импортирует их оба. Попробуйте отредактировать <Profile /> на <Gallery /> и обратно в этом примере:

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <Profile />
  );
}

Теперь вы используете смешанный подход из экспорта по умолчанию и именованных экспортов:

• Gallery.js:
  • Экспортирует компонент Profile как именованный экспорт под именем Profile.
  • Экспортирует компонент Gallery как экспорт по умолчанию.
• App.js:
  • Импортирует Profile как именованный импорт под именем Profile из Gallery.js.
  • Импортирует Gallery как импорт по умолчанию из Gallery.js.
  • Экспортирует корневой компонент App как экспорт по умолчанию.

// Move me to Profile.js!
export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}