React Props

Einführung

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

In diesem Lab lernen Sie, wie Sie:

• Props von einer Elternkomponente an eine Kindkomponente definieren und übergeben.
• Props innerhalb einer Kindkomponente abrufen und verwenden.
• Destrukturierung verwenden, um Ihren Code übersichtlicher zu gestalten.
• Standardwerte für Props festlegen.

Legen wir los!

Props-Parameter in funktionaler 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 ist, das alle an sie übergebenen Props enthält. Konventionsgemäß wird dieses Objekt props genannt.

Navigieren Sie zunächst zu unserem Projektverzeichnis. Das Setup-Skript hat bereits ein Projekt namens my-app erstellt.

cd ~/project/my-app

Als Nächstes müssen wir die Projekt-Abhä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 Haupt-App-Komponente 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 anzuzeigen.

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 laufende Anwendung sehen, die "Welcome to My App" und "Hello, World!" anzeigt.

Prop-Wert vom Parent wie name="John" übergeben

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 der Greeting-Komponente einen Namen übergeben, damit sie eine personalisierte Nachricht anzeigen kann.

Öffnen Sie die Datei src/App.jsx. Ändern Sie die Zeile <Greeting />, um eine name-Prop mit dem Wert "John" einzufü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" die Prop. name ist der Schlüssel der Prop und "John" ist ihr Wert. Sie können jeden JavaScript-Ausdruck als Prop-Wert übergeben, indem Sie ihn in geschweifte Klammern {} einschließen. Für Strings sind Anführungszeichen ausreichend.

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 die Prop übergeben haben, die Greeting-Komponente sie aber noch nicht verwendet. Das werden wir im nächsten Schritt beheben.

Prop im Child mit props.name zugreifen

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

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

Aktualisieren Sie src/Greeting.jsx mit dem folgenden 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 die Nachricht zu "Hello, John!" aktualisiert wurde.

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

Props im Funktionsparameter destrukturieren

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

Lassen Sie uns die Greeting-Komponente refaktorisieren, um Destrukturierung 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;

Durch die Änderung von (props) zu ({ name }) weisen wir JavaScript an, die name-Eigenschaft aus dem an die Funktion übergebenen Objekt zu extrahieren. Dies macht den Körper 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 gleich sein ("Hello, John!"), aber unser Code ist nun prägnanter und besser lesbar.

Standard-Props mit Standardparametern setzen

Was passiert, wenn eine Elternkomponente eine erforderliche Prop nicht übergibt? Der Wert wird undefined sein, was zu Fehlern oder unerwarteten Benutzeroberflächen 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 einzuschließen. Wir setzen den Standardnamen auf "Guest".

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

export default Greeting;

Lassen Sie uns dies nun testen. Öffnen Sie src/App.jsx und fügen Sie eine weitere <Greeting />-Komponente hinzu, aber übergeben Sie ihr diesmal keine 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 die Prop erhalten hat)
• "Hello, Guest!" (von der Komponente, die die 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 gelernt, um wiederverwendbare und dynamische Komponenten zu erstellen.

In diesem Lab haben Sie geübt:

• Daten von einer Elternkomponente an eine Kindkomponente mittels Props zu übergeben.
• Auf Props innerhalb einer Kindkomponente über das props-Objekt zuzugreifen.
• Destrukturierung zu verwenden, um saubereren, besser lesbaren Code zu schreiben.
• Standardwerte für Props mit defaultProps festzulegen, um Ihre Komponenten robuster zu machen.

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