Est-il possible d'importer plusieurs classes avec ES6 / Babel?

Question

Je travaille sur un projet React (mon premier) et j'ai récemment restructuré ma structure de dossiers pour donner un peu plus de sens.

Pour me faciliter la vie, dans mes dossiers de composants, j'ai un index.js fichier qui ressemble à ceci:

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

(L'idée a été tirée d'une autre Question StackOverflow )

Dans ce cas, chacun des fichiers de cet index pointe vers une exportation de classe singulière.

Maintenant, dans mon application principale, j'essaie de faire quelque chose comme:

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

Rien ne fonctionne. J'ai trouvé que si je les séparais tous en lignes individuelles pointant directement sur le bon fichier, cela fonctionne.

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

Est-il donc possible d'importer plusieurs classes comme je le fais et je ne le vois tout simplement pas? Dois-je peut-être tous les nommer (App as App)? Ou s'agit-il simplement d'une limitation imposée?

Answer 1

Vous pouvez exporter comme ceci:

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

export {
    App,
    Home,
    PageWrapper
}

Ensuite, vous pouvez importer comme cela où vous en avez besoin:

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

...

Vous pouvez en savoir plus sur import et export ici. J'ai également répondu à une question similaire ici .

Answer 2

J'utilise l'exportation qui ressemble à ceci. En réaction, cela a bien fonctionné

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

Ensuite, vous pouvez importer comme ceci où vous en avez besoin:

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

Answer 3

vous pouvez utiliser cette méthode

import * React from 'react'