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

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

В Вашем первом компоненте, вы создали 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>
  );
}