Можно ли импортировать несколько классов с помощью ES6/Babel?

Я работаю над проектом реагирования (мой первый), и недавно я перестроил структуру своей папки, чтобы немного улучшить смысл.

Чтобы сделать мою жизнь проще, в моих папках компонентов у меня есть файл index.js, который выглядит следующим образом:

export * from './App';
export * from './Home';
export * from './PageWrapper';

(Идея была снята с другого qaru.site/info/49822/...)

В этом случае каждый из файлов, на которые указывает этот индекс, имеет экспорт исключительного класса.

Теперь в моем основном приложении я пытаюсь сделать что-то вроде:

import {Home, App} from './containers/index';
//or
import Home from './containers/index';

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

import Home from './containers/Home';
import App from './containers/App';

Так можно ли импортировать несколько классов так, как я это делаю, и я просто не вижу этого? Возможно, мне нужно назвать их всех (App as App)? Или это просто принудительное ограничение?

Ответ 1

Вы можете экспортировать так:

import App from './App';
import Home from './Home';
import PageWrapper from './PageWrapper';

export {
    App,
    Home,
    PageWrapper
}

Затем вы можете импортировать данные так, как вам нужно:

import { App, PageWrapper } from './index' //or similar filename

...

Вы можете узнать больше об импорте и экспорте здесь. Я также ответил на аналогичный вопрос здесь.

Ответ 2

Я использую экспорт, который выглядит примерно так. В реакции он хорошо работал

export {default as PublicRoute} from './PublicRoute';
export {default as PrivateRoute} from './PrivateRoute';

Затем вы можете импортировать, как это, где вам нужно:

import {PublicRoute, PrivateRoute} from './config/router';
...

Ответ 3

Вы можете использовать этот метод

import * React from 'react'