Importieren und Exportieren von Komponenten

Die Magie von Komponenten liegt in ihrer Wiederverwendbarkeit: Sie können Komponenten erstellen, die aus anderen Komponenten bestehen. Wenn Sie jedoch immer mehr Komponenten verschachteln, ist es oft sinnvoll, sie in verschiedene Dateien aufzuteilen. So bleiben Ihre Dateien übersichtlich und Sie können Komponenten an mehr Stellen wiederverwenden.

Die Root-Komponentendatei

InIhre erste Komponentehaben Sie eineProfile-Komponente und eineGallery-Komponente erstellt, die sie rendert:

Diese befinden sich derzeit in einerRoot-Komponentendatei,in diesem Beispiel namensApp.js. Je nach Setup könnte sich Ihre Root-Komponente jedoch in einer anderen Datei befinden. Wenn Sie ein Framework mit dateibasiertem Routing wie Next.js verwenden, ist Ihre Root-Komponente für jede Seite unterschiedlich.

Exportieren und Importieren einer Komponente

Was, wenn Sie in Zukunft die Startseite ändern und dort eine Liste von Wissenschaftsbüchern anzeigen möchten? Oder alle Profile an eine andere Stelle verschieben? Es ist sinnvoll,GalleryundProfileaus der Root-Komponentendatei herauszunehmen. Dadurch werden sie modularer und in anderen Dateien wiederverwendbar. Sie können eine Komponente in drei Schritten verschieben:

1. ErstellenSie eine neue JS-Datei, um die Komponenten darin abzulegen.
2. ExportierenSie Ihre Funktionskomponente aus dieser Datei (entweder mitStandard-oderbenanntenExports).
3. ImportierenSie sie in der Datei, in der Sie die Komponente verwenden möchten (mit der entsprechenden Technik zum Importieren vonStandard-oderbenanntenExports).

Hier wurden sowohlProfileals auchGallery aus App.jsin eine neue Datei namensGallery.jsverschoben. Jetzt können SieApp.jsändern, umGalleryausGallery.jszu importieren:

Beachten Sie, wie dieses Beispiel nun in zwei Komponentendateien aufgeteilt ist:

1. Gallery.js:
   • Definiert dieProfile-Komponente, die nur innerhalb derselben Datei verwendet und nicht exportiert wird.
   • Exportiert dieGallery-Komponente alsStandardexport.
2. App.js:
   • ImportiertGalleryalsStandardimportausGallery.js.
   • Exportiert die Root-App-Komponente alsStandardexport.

Exportieren und Importieren mehrerer Komponenten aus derselben Datei

Was ist, wenn Sie nur einProfileanstelle einer Galerie anzeigen möchten? Sie können auch dieProfile-Komponente exportieren. AberGallery.jshat bereits einenStandardexport, und Sie können nichtzweiStandardexporte haben. Sie könnten eine neue Datei mit einem Standardexport erstellen oder einenbenanntenExport fürProfilehinzufügen.Eine Datei kann nur einen Standardexport haben, aber sie kann zahlreiche benannte Exporte haben!

ZuerstexportierenSieProfileausGallery.jsmit einem benannten Export (ohne das Schlüsselwortdefault):

Importiere dannmittels eines benannten Imports (mit geschweiften Klammern)ProfileausGallery.jsinApp.js:

Rendere schließlich<Profile />aus derApp-Komponente:

Nun enthältGallery.jszwei Exporte: einen StandardexportGalleryund einen benannten ExportProfile. App.jsimportiert beide. Versuche in diesem Beispiel,<Profile />in<Gallery />zu ändern und zurück:

Jetzt verwendest du eine Mischung aus Standard- und benannten Exporten:

• Gallery.js:
  • Exportiert dieProfile-Komponente als einenbenannten Export namensProfile.
  • Exportiert dieGallery-Komponente als einenStandardexport.
• App.js:
  • ImportiertProfileals einenbenannten Import namensProfileausGallery.js.
  • ImportiertGalleryals einenStandardimportausGallery.js.
  • Exportiert die Root-App-Komponente als einenStandardexport.

Zusammenfassung

Auf dieser Seite hast du gelernt:

• Was eine Root-Komponentendatei ist
• Wie man eine Komponente importiert und exportiert
• Wann und wie man Standard- und benannte Imports und Exports verwendet
• Wie man mehrere Komponenten aus derselben Datei exportiert