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

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

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

function Profile() {  return (    <img      src="https://react.dev/images/docs/scientists/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. Экспортируйте свой функциональный компонент из этого файла (используя либо default, либо named экспорты).

3. Импортируйте его в файл, где вы будете использовать компонент (используя соответствующий метод для импорта по умолчанию или именованного exports). Здесь и 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 существует два основных способа экспорта значений: экспорт по умолчанию и именованный экспорт. До сих пор в наших примерах использовался только экспорт по умолчанию. Но вы можете использовать один из них или оба в одном файле. Файл может содержать не более одного default экспорта, но может содержать столько named экспортов, сколько вы хотите. То, как вы экспортируете свой компонент, определяет, как его нужно импортировать. Вы получите ошибку, если попытаетесь импортировать экспорт по умолчанию так же, как именованный экспорт! Эта таблица поможет вам сориентироваться:

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

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

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

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

Вы можете создать новый файл с экспортом по умолчанию или добавить именованный экспорт для 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 как экспорт по умолчанию.

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

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