Importation et exportation de composants

La magie des composants réside dans leur réutilisabilité : vous pouvez créer des composants qui sont composés d'autres composants. Mais à mesure que vous imbriquez de plus en plus de composants, il est souvent judicieux de commencer à les séparer dans différents fichiers. Cela vous permet de garder vos fichiers faciles à parcourir et de réutiliser les composants à plus d'endroits.

Le fichier de composant racine

DansVotre premier composant, vous avez créé un composantProfileet un composantGalleryqui l'affiche :

Ils se trouvent actuellement dans unfichier de composant racine,nomméApp.jsdans cet exemple. Selon votre configuration, votre composant racine pourrait se trouver dans un autre fichier. Si vous utilisez un framework avec un routage basé sur les fichiers, comme Next.js, votre composant racine sera différent pour chaque page.

Exporter et importer un composant

Et si vous vouliez changer l'écran d'accueil à l'avenir pour y mettre une liste de livres scientifiques ? Ou placer tous les profils ailleurs ? Il est logique de déplacerGalleryetProfilehors du fichier de composant racine. Cela les rendra plus modulaires et réutilisables dans d'autres fichiers. Vous pouvez déplacer un composant en trois étapes :

1. Créezun nouveau fichier JS pour y placer les composants.
2. Exportezvotre composant fonction de ce fichier (en utilisant soit les exportationspar défautsoit les exportationsnommées).
3. Importez-le dans le fichier où vous utiliserez le composant (en utilisant la technique correspondante pour importer les exportationspar défautounommées).

Ici,ProfileetGalleryont tous deux été déplacés hors deApp.jsvers un nouveau fichier appeléGallery.js. Maintenant, vous pouvez modifierApp.jspour importerGallerydepuisGallery.js:

Notez comment cet exemple est maintenant décomposé en deux fichiers de composants :

1. Gallery.js:
   • Définit le composantProfilequi est uniquement utilisé dans le même fichier et n'est pas exporté.
   • Exporte le composantGalleryen tant qu'export par défaut.
2. App.js:
   • ImporteGalleryen tant qu'import par défautdepuisGallery.js.
   • Exporte le composant racineAppen tant qu'export par défaut.

Exporter et importer plusieurs composants depuis le même fichier

Et si vous voulez afficher un seulProfileau lieu d'une galerie ? Vous pouvez aussi exporter le composantProfile. Mais Gallery.jsa déjà un exportpar défaut, et vous ne pouvez pas avoirdeuxexports par défaut. Vous pourriez créer un nouveau fichier avec un export par défaut, ou vous pourriez ajouter un exportnommépourProfile.Un fichier ne peut avoir qu'un seul export par défaut, mais il peut avoir de nombreux exports nommés !

Premièrement,exportezProfiledepuisGallery.jsen utilisant un export nommé (sans le mot-clédefault) :

Ensuite,importezProfiledepuisGallery.jsversApp.jsen utilisant une importation nommée (avec les accolades) :

Enfin,rendez<Profile />depuis le composantApp :

Maintenant,Gallery.jscontient deux exportations : une exportation par défautGalleryet une exportation nomméeProfile. App.jsimporte les deux. Essayez de modifier<Profile />en<Gallery />et inversement dans cet exemple :

Vous utilisez maintenant un mélange d’exportations par défaut et nommées :

• Gallery.js:
  • Exporte le composantProfileen tant qu'export nommé appeléProfile.
  • Exporte le composantGalleryen tant qu'export par défaut.
• App.js:
  • ImporteProfileen tant qu'import nommé appeléProfiledepuisGallery.js.
  • ImporteGalleryen tant qu'import par défautdepuisGallery.js.
  • Exporte le composant racineAppen tant qu'export par défaut.

Récapitulatif

Sur cette page, vous avez appris :

• Ce qu'est un fichier de composant racine
• Comment importer et exporter un composant
• Quand et comment utiliser les imports et exports par défaut et nommés
• Comment exporter plusieurs composants depuis le même fichier