как экспортировать несколько классов в реакции

Question

Здравствуйте, я пытаюсь экспортировать несколько классов в реакции, чтобы они могли быть отображены на одной странице. Моя группа делает каждый элемент обработанным, а теперь связывает все вместе. Проблема в том, что когда мы пытаемся объединить классы, мы получаем ошибки, которые уже были объявлены. Это весь процесс обучения, и, ища решения, мы увидели, что вы можете импортировать компоненты и визуализировать их, но даже просматривая документацию, мы немного запутались.

import styles from './ViewJobsList.css';
import { Helmet } from 'react-helmet';
import { compA, compB} from './App.js';


class compA extends React.Component {...};


class compB extends React.Component {...};

export default { compA, compB};

Теперь каждый класс работает сам по себе, но вместе, если поставить его так, мы получаем

Ошибка синтаксического анализа: идентификатор 'compA' уже объявлен

Как мы можем экспортировать эти два класса и еще один в будущем?

Answer 1

Если вы уберете эту строку:

import { compA, compB} from './App.js';

Это сработает.

Причина, по которой он сейчас не работает, заключается в том, что вы импортируете и декларируете функции в тот же файл. Вы хотите только объявить или импорт - но не оба.

Вы хотите использовать оператор импорта только в тех файлах, где вы хотите, чтобы функции перетаскивались из нового файла. Экспорт используется для файла, в котором объявлены функции.

Редактировать: Таким образом, чтобы импортировать и экспортировать, как вы хотите, вам нужно сформулировать это так:

В ваше приложение. js, вам нужно сформулировать это следующим образом:

export {compA, compB};

В вашем индексе. js, вам нужно:

import {compA, compB} из "./app.js"

** Примечание !! Если ваше приложение. js находится в другой папке, то есть в папке компонентов, вам необходимо добавить маршрут к папке перед приложением. js, поэтому оно будет выглядеть так:

. / Components / app . js**

Все должно быть в порядке - при условии, что у вас есть React и соответствующие зависимости, импортированные.

Answer 2

Попробуйте удалить строку 3 в вашем фрагменте, а именно import {compA, compB} из './App.js';