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

Магия компонентов заключается в их повторном использовании: вы можете создавать компоненты, состоящие из других компонентов. Но по мере того, как вы вкладываете всё больше и больше компонентов, часто имеет смысл начать разделять их на разные файлы. Это позволяет сохранять файлы удобными для просмотра и повторно использовать компоненты в большем количестве мест.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

На этой странице вы узнали:

• Что такое файл корневого компонента
• Как импортировать и экспортировать компонент
• Когда и как использовать импорты и экспорты по умолчанию и именованные
• Как экспортировать несколько компонентов из одного файла