Метод 1: именованный экспорт
Именованный экспорт позволяет нам экспортировать несколько компонентов из файла и импортировать их по отдельности под соответствующими именами. Вот пример:

// components.js
export const Component1 = () => {
  // Component 1 code here
};
export const Component2 = () => {
  // Component 2 code here
};

Чтобы импортировать эти компоненты в другой файл:

import { Component1, Component2 } from './components.js';

Метод 2: экспорт по умолчанию с именованным экспортом
В некоторых случаях может потребоваться экспорт по умолчанию вместе с именованным экспортом. Вот пример:

// components.js
const Component1 = () => {
  // Component 1 code here
};
const Component2 = () => {
  // Component 2 code here
};
export { Component1, Component2 };
export default Component1; // Default export

Чтобы импортировать экспорт по умолчанию и именованный экспорт:

import DefaultComponent, { Component1, Component2 } from './components.js';

Метод 3: экспорт как объект
Если у вас есть несколько компонентов для экспорта, вы можете сгруппировать их в объект и экспортировать объект. Вот пример:

// components.js
const Component1 = () => {
  // Component 1 code here
};
const Component2 = () => {
  // Component 2 code here
};
const components = {
  Component1,
  Component2,
};
export default components;

Чтобы импортировать экспортированные компоненты:

import components from './components.js';
const { Component1, Component2 } = components;

Метод 4: экспорт через index.js
Другая распространенная практика — создание файла index.jsдля экспорта нескольких компонентов из каталога. Вот пример:

// components/index.js
export { default as Component1 } from './Component1';
export { default as Component2 } from './Component2';

Чтобы импортировать компоненты:

import { Component1, Component2 } from './components';

В этой статье мы рассмотрели несколько методов экспорта нескольких компонентов из одного файла в React. Используя именованный экспорт, экспорт по умолчанию, экспорт в виде объекта или файл index.js, вы можете эффективно модульно структурировать свой код и повысить его удобство сопровождения и возможность повторного использования.

Не забудьте выбрать метод, который лучше всего соответствует потребностям вашего проекта и правилам кодирования. Приятного кодирования!