React-Komponenten exportieren

1. Arten von Export-Anweisungen zur Wiederverwendung von Komponenten in React
2. Verwenden Sie den benannten Export, um Komponenten in React zu exportieren
3. Verwenden Sie den Standardexport, um Komponenten in React zu exportieren

Entwickler lieben das React-Framework, weil es Ihnen ermöglicht, wiederverwendbare Komponenten zu erstellen und sie bei Bedarf zu verwenden. Im Entwicklungs-Build werden Komponenten in viele verschiedene Dateien aufgeteilt, daher ist es hilfreich, die Konventionen für deren Import und Export zu kennen.

Dieser Artikel befasst sich mit verschiedenen Möglichkeiten zum Exportieren von Komponenten in React.

Arten von Export-Anweisungen zur Wiederverwendung von Komponenten in React

Export- und Import-Anweisungen ermöglichen es React-Entwicklern, Komponenten in mehrere Dateien aufzuteilen. Bei Bedarf können Entwickler auch mehrere logisch verbundene Komponenten in eine einzige Datei packen.

Die Art der Exportanweisungen kann die Verfügbarkeit der Komponenten in fremden Dateien beeinflussen. Die Anweisung export macht Live-Bindings aus einer bestimmten Datei überall sonst verfügbar. Andere Dateien können die Werte in diesen Live-Bindings mit der Anweisung import laden.

Denken Sie beim Importieren einer Bindung daran, dass sich ihr Quellwert jederzeit ändern kann. Wenn der Wert in der Quelldatei geändert wird, die ein Modul exportiert, wird es überall importiert aktualisiert. Die export-Anweisung arbeitet standardmäßig automatisch nach den strikten Modusregeln.

Wir können grundsätzlich zwei Arten von Exporten unterscheiden: named- und default-Exporte. Benannte Exporte können verwendet werden, um beliebig viele Bindungen oder gar keine zu exportieren. Standardexporte sind restriktiver, da es nur einen Exporttyp pro Datei geben kann.

Es gibt Syntaxunterschiede zwischen den beiden Exportarten. Wir werden sie in den folgenden Abschnitten ausführlich besprechen. Die Art der Exporte beeinflusst auch die Syntax, die Sie beim Importieren verwenden müssen.

Verwenden Sie den benannten Export, um Komponenten in React zu exportieren

Webpack und ES6 haben den Prozess des Importierens und Exportierens von Dateien vereinfacht. Dennoch müssen einige Verwirrungen über benannte Exporte beseitigt werden.

Wenn eine Datei mehrere Komponenten enthält, können Sie benannte Exporte verwenden. Es ist wahrscheinlich besser, benannte Exporte zu verwenden, um mehr als eine Komponente (oder andere Bindungen) pro Datei zu exportieren.

Außerdem ist die Syntax für benannte Exporte und Importe wohl einfacher. Wenn Sie eine auf diese Weise exportierte Bindung importieren, müssen Sie denselben Namen wie die Quelldatei verwenden.

Schauen wir uns ein Beispiel an:

export function Greet() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
export function Talk() {
  return (
    <div className="App">
      <h1>How are you?</h1>
    </div>
  );
}

Wir könnten diese Komponenten mit der folgenden Syntax in eine andere Datei importieren:

import {Talk, Greet} from "./components/source.jsx"

In diesem Beispiel wird der Pfad zur Quelldatei zwischen den Zeichenketten angegeben. Wir verwenden die gleichen Bindungsnamen auch in der Quelldatei und setzen sie zwischen geschweiften Klammern.

Wenn Sie die Syntax der geschweiften Klammern nicht verwenden, interpretiert das Dokument, dass Sie versuchen, eine Bindung zu importieren, die mit dem Standardexport geteilt wird. Sie können die Syntax zum Importieren eines Standardexports nicht verwenden, um einen benannten Export zu importieren; Sie erhalten einen Fehler.

Wenn Sie der Meinung sind, dass die Bindungsnamen unklar sind, können Sie sie vor dem Exportieren umbenennen. Im obigen Beispiel könnten wir Folgendes tun:

export {Greet as Greeting}

Verwenden Sie den Standardexport, um Komponenten in React zu exportieren

Die meisten React-Anwendungen folgen dem Muster, für jede Komponente eine separate Datei zu erstellen. Diese Konvention macht Standardexporte nützlich für den Export der Komponenten.

Auf diese Weise exportierte Komponenten sind viel einfacher zu importieren. Da es sich um die einzigen Exporte aus der Datei handelt, können Sie sie beliebig benennen, solange Sie den richtigen Dateipfad angeben.

JavaScript versteht, nach welcher Datei Sie suchen. Und Sie müssen keine geschweiften Klammern verwenden. Schauen wir uns das Beispiel an:

export default function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}

Die Beispiele für beide Arten von Exporten sind hier verfügbar.

Wenn wir die App-Komponente importieren wollten, müssen wir nur Folgendes tun:

import Application from "./components/App.jsx"

Wir müssen weder geschweifte Klammern noch denselben Bindungsnamen aus der Quelldatei verwenden. Wir haben die Freiheit zu improvisieren. Auf diese Weise wird der Wert umbenannt und in dieser Datei können wir ihn als Application statt App bezeichnen.

Im obigen Beispiel definieren wir die Funktionskomponente direkt nach der Anweisung export default. Wir könnten es auch separat definieren und in der Anweisung darauf verweisen.

Zum Beispiel:

function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}
export default App

Für manche Menschen ist dies ein besser lesbarer Ansatz. Der einzige praktische Nachteil von Standardexporten besteht darin, dass sie nur auf eine Komponente pro Datei angewendet werden können.