React Props: Daten an Komponenten übergeben

Einführung

In React sind props (kurz für "properties") ein grundlegendes Konzept, um Daten von einer Komponente an eine andere weiterzugeben. Sie ermöglichen es Ihnen, dynamische und wiederverwendbare Komponenten zu erstellen. Betrachten Sie Props wie Argumente, die Sie an eine Funktion übergeben; sie erlauben einer Elternkomponente, ihre Kindkomponenten zu konfigurieren. Props sind schreibgeschützt (read-only), was bedeutet, dass eine Kindkomponente die erhaltenen Props niemals direkt verändern sollte.

In diesem Lab lernen Sie:

Props von einer Elternkomponente an eine Kindkomponente zu definieren und zu übergeben.
Innerhalb einer Kindkomponente auf Props zuzugreifen und diese zu verwenden.
Destructuring zu nutzen, um Ihren Code übersichtlicher zu gestalten.
Standardwerte für Props festzulegen.

Fangen wir an!

Props-Parameter in einer funktionalen Komponente definieren

In diesem Schritt erstellen Sie eine neue Kindkomponente und bereiten sie darauf vor, Props zu empfangen. Funktionale Komponenten in React können ein einzelnes Argument akzeptieren, das ein Objekt mit allen übergebenen Props enthält. Konventionsgemäß wird dieses Objekt props genannt.

Navigieren wir zunächst in unser Projektverzeichnis. Das Setup-Skript hat bereits ein Projekt namens my-app erstellt.

cd ~/project/my-app

Als Nächstes müssen wir die Projektabhängigkeiten installieren.

npm install

Erstellen wir nun eine neue Komponentendatei. Navigieren Sie im Dateiexplorer auf der linken Seite zum Ordner src. Erstellen Sie eine neue Datei innerhalb von src und nennen Sie sie Greeting.jsx.

Fügen Sie den folgenden Code in Ihre neu erstellte Datei src/Greeting.jsx ein. Dies definiert eine einfache funktionale Komponente, die einen props-Parameter akzeptiert.

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

Als Nächstes müssen wir diese neue Komponente in unserer Hauptkomponente App importieren und verwenden. Öffnen Sie die Datei src/App.jsx und ändern Sie sie wie folgt:

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

Starten wir nun den Entwicklungsserver, um unsere Anwendung zu sehen.

npm run dev -- --host 0.0.0.0 --port 8080

Nachdem Sie den Befehl ausgeführt haben, wechseln Sie zum Tab Web 8080 in der oberen linken Ecke der Benutzeroberfläche. Sie sollten Ihre Anwendung sehen, die "Welcome to My App" und "Hello, World!" anzeigt.

Prop-Werte von der Elternkomponente übergeben, z. B. name="John"

In diesem Schritt lernen Sie, wie Sie Daten von der Elternkomponente (App) an die Kindkomponente (Greeting) übergeben. Dies geschieht mithilfe einer attributähnlichen Syntax in JSX.

Wir möchten den Namen einer Person an unsere Greeting-Komponente übergeben, damit sie eine personalisierte Nachricht anzeigen kann.

Öffnen Sie die Datei src/App.jsx. Ändern Sie die Zeile <Greeting />, um ein name-Prop mit dem Wert "John" hinzuzufügen.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

Hier ist name="John" das Prop. name ist der Schlüssel des Props und "John" ist sein Wert. Sie können jeden beliebigen JavaScript-Ausdruck als Prop-Wert übergeben, indem Sie ihn in geschweifte Klammern {} setzen. Für Zeichenketten (Strings) reichen Anführungszeichen aus.

Nach dem Speichern der Datei wird der Entwicklungsserver automatisch neu geladen. Wenn Sie den Tab Web 8080 überprüfen, hat sich die Ausgabe noch nicht geändert. Das liegt daran, dass wir das Prop zwar übergeben haben, die Greeting-Komponente es aber noch nicht verwendet. Das werden wir im nächsten Schritt beheben.

Zugriff auf Props in der Kindkomponente mit props.name

Da die Greeting-Komponente nun das name-Prop empfängt, wollen wir es verwenden. Das props-Objekt in der Kindkomponente enthält alle Eigenschaften, die von der Elternkomponente übergeben wurden. Sie können mit der Punkt-Notation darauf zugreifen, z. B. props.propertyName.

Öffnen Sie die Datei src/Greeting.jsx. Wir werden sie so anpassen, dass sie auf props.name zugreift und die personalisierte Begrüßung anzeigt. Verwenden Sie geschweifte Klammern {}, um den JavaScript-Ausdruck direkt in Ihr JSX einzubetten.

Aktualisieren Sie src/Greeting.jsx mit folgendem Code:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

export default Greeting;

Speichern Sie die Datei. Wechseln Sie nun zum Tab Web 8080. Sie sollten sehen, dass sich die Nachricht auf "Hello, John!" aktualisiert hat.

Dies demonstriert den grundlegenden Datenfluss in React: von der Eltern- zur Kindkomponente über Props.

Props im Funktionsparameter destrukturieren

Das Schreiben von props.name, props.age usw. kann repetitiv werden, besonders wenn eine Komponente viele Props erhält. Ein saubererer und gebräuchlicherer Ansatz ist die Verwendung von ES6-Destructuring, um die Eigenschaften direkt in der Parameterliste der Funktion aus dem props-Objekt zu entpacken.

Lassen Sie uns die Greeting-Komponente refactoren, um Destructuring zu verwenden.

Öffnen Sie src/Greeting.jsx und ändern Sie die Funktionssignatur. Anstatt props zu akzeptieren, werden wir es destrukturieren, um name direkt zu erhalten.

Aktualisieren Sie die Datei wie folgt:

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Indem wir (props) in ({ name }) ändern, weisen wir JavaScript an, die Eigenschaft name aus dem an die Funktion übergebenen Objekt zu extrahieren. Dies macht den Rumpf der Komponente übersichtlicher, da wir nun name direkt anstelle von props.name verwenden können.

Speichern Sie die Datei und überprüfen Sie den Tab Web 8080. Die Ausgabe sollte exakt dieselbe sein ("Hello, John!"), aber unser Code ist nun prägnanter und lesbarer.

Standard-Props mit Standardparametern festlegen

Was passiert, wenn eine Elternkomponente ein erforderliches Prop nicht übergibt? Der Wert ist dann undefined, was zu Fehlern oder unerwartetem Verhalten der Benutzeroberfläche führen kann. Um dies zu verhindern, können Sie Standardwerte für Props festlegen.

Für funktionale Komponenten können Sie Standardparameter in der Funktionssignatur verwenden.

Lassen Sie uns einen Standardnamen für unsere Greeting-Komponente festlegen. Öffnen Sie src/Greeting.jsx und ändern Sie den Funktionsparameter, um einen Standardwert einzufügen. Wir setzen den Standardnamen auf "Guest".

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Lassen Sie uns das nun testen. Öffnen Sie src/App.jsx und fügen Sie eine weitere <Greeting />-Komponente hinzu, aber übergeben Sie diesmal kein name-Prop.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

Speichern Sie beide Dateien. Gehen Sie zum Tab Web 8080. Sie sollten nun zwei Begrüßungen sehen:

"Hello, John!" (von der Komponente, die das Prop erhalten hat)
"Hello, Guest!" (von der Komponente, die das Standard-Prop verwendet hat)

Dies ist eine robuste Methode, um Ihre Komponenten vorhersehbarer zu machen und Fehler zu vermeiden.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben die Grundlagen der Verwendung von Props in React kennengelernt, um wiederverwendbare und dynamische Komponenten zu erstellen.

In diesem Lab haben Sie geübt:

Daten von einer Eltern- an eine Kindkomponente mittels Props zu übergeben.
Innerhalb einer Kindkomponente über das props-Objekt auf Props zuzugreifen.
Destructuring zu verwenden, um saubereren und lesbareren Code zu schreiben.
Standardwerte für Props festzulegen, um Ihre Komponenten robuster zu machen.

Props sind ein Eckpfeiler der React-Entwicklung, und ihre Beherrschung ist ein entscheidender Schritt beim Aufbau komplexer Anwendungen. Üben Sie diese Konzepte weiter, während Sie Ihre Reise mit React fortsetzen.