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

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

Корневой файл компонента¶

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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. В Create React App ваше приложение находится в src/App.js. Однако, в зависимости от вашей конфигурации, ваш корневой компонент может находиться в другом файле. Если вы используете фреймворк с файловой маршрутизацией, например Next.js, ваш корневой компонент будет разным для каждой страницы.

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

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

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

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

1
2
3
4
5

import Gallery from './Gallery.js';

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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>
    );
}

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

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

1

import Gallery from './Gallery';

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

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

Во-первых, экспортируйте Profile из Gallery.js, используя именованный экспорт (без ключевого слова default):

1
2
3

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

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

1

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

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

1
2
3

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

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

1
2
3
4
5
6

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

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>
    );
}

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

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

Задача¶

1. Разделяйте компоненты дальше¶

В настоящее время Gallery.js экспортирует и Profile и Gallery, что немного запутывает.

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

Вы можете использовать либо экспорт по умолчанию, либо именованный экспорт для Profile, но убедитесь, что вы используете соответствующий синтаксис импорта как в App.js, так и в Gallery.js! Вы можете обратиться к таблице из глубокого погружения выше:

Не забывайте импортировать свои компоненты там, где они вызываются. Разве Gallery не использует Profile тоже?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// Перемести в 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>
    );
}

1

После того, как вы заставите его работать с одним видом экспорта, заставьте его работать с другим видом.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

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

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

1
2
3
4
5
6
7
8

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import Profile from './Profile.js';

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

1
2
3
4
5
6
7
8

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

Источник — https://react.dev/learn/importing-and-exporting-components

Комментарии