Bedingtes Rendern in React

Einführung

In React ist bedingtes Rendern ein Kernkonzept, das es Ihnen ermöglicht, verschiedene Komponenten oder Elemente basierend auf bestimmten Bedingungen oder dem Anwendungsstatus anzuzeigen. Dies ist grundlegend für den Aufbau dynamischer und reaktionsfähiger Benutzeroberflächen. Zum Beispiel möchten Sie vielleicht einem Gast eine "Anmelden"-Schaltfläche anzeigen, einem angemeldeten Benutzer jedoch eine "Profil"-Seite.

In diesem Lab lernen Sie mehrere gängige Techniken zur Implementierung von bedingtem Rendern in Ihren React-Anwendungen kennen. Wir beginnen mit einem grundlegenden Projekt-Setup und erkunden schrittweise verschiedene Methoden, darunter:

• Den ternären Operator (? :) für einfache Wenn-Dann-Wenn-Nicht-Logik.
• Den logischen &&-Operator zum Rendern eines Elements nur, wenn eine Bedingung wahr ist.
• Die Verwendung von Variablen zum Speichern von Elementen für saubereres JSX.
• Das Zurückgeben von null, um zu verhindern, dass eine Komponente gerendert wird.
• Die Verwendung von React-State, um interaktive Benutzeroberflächen zu erstellen, die das Angezeigte ändern.

Am Ende dieses Labs werden Sie ein solides Verständnis dafür haben, wie Sie steuern können, was Ihre Benutzer basierend auf dem Zustand Ihrer Anwendung sehen.

Verwenden Sie den ternären Operator in JSX für Bedingungen

In diesem Schritt lernen Sie, wie Sie den bedingten (ternären) Operator (? :) für Inline-if-else-Logik direkt in Ihrem JSX verwenden. Dies ist eine prägnante Methode, um zwischen zwei verschiedenen UI-Elementen zur Darstellung zu wählen.

Navigieren Sie zunächst zu unserem Projektverzeichnis. Alle Befehle sollten von diesem Verzeichnis aus ausgeführt werden.

cd ~/project/my-app

Als Nächstes müssen wir die Projekt-Abhängigkeiten installieren.

npm install

Nun ändern wir die Hauptanwendungskomponente. Öffnen Sie die Datei src/App.jsx im Dateiexplorer auf der linken Seite. Wir erstellen eine Greeting-Komponente, die eine andere Nachricht anzeigt, je nachdem, ob ein Benutzer angemeldet ist.

Ersetzen Sie den gesamten Inhalt von src/App.jsx durch den folgenden Code:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>
  );
}

function App() {
  return (
    <div>
      {/* Versuchen Sie, isLoggedIn auf false zu ändern, um die andere Nachricht zu sehen! */}
      <Greeting isLoggedIn={true} />
    </div>
  );
}

export default App;

In der Greeting-Komponente prüft der Ausdruck {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} den Wert der isLoggedIn-Prop. Wenn dieser true ist, wird "Welcome back!" gerendert. Andernfalls wird "Please sign up." gerendert.

Starten wir nun den Entwicklungsserver, um unsere Komponente in Aktion zu sehen.

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

Nachdem der Server gestartet ist, öffnen Sie den Tab Web 8080 oben auf dem Bildschirm. Sie sollten die Nachricht "Welcome back!" sehen. Sie können versuchen, isLoggedIn={true} in src/App.jsx zu isLoggedIn={false} zu ändern, die Datei zu speichern und zu beobachten, wie sich der Inhalt automatisch im Browser aktualisiert.

Verwenden Sie den logischen && Operator für Short-Circuiting

In diesem Schritt werden wir ein weiteres gängiges Muster für bedingtes Rendern untersuchen: den logischen &&-Operator. Dies ist besonders nützlich, wenn Sie ein Element nur dann rendern möchten, wenn eine bestimmte Bedingung wahr ist, und ansonsten nichts rendern möchten. In JavaScript evaluiert true && expression immer zu expression, und false && expression immer zu false. React behandelt false als einen Wert, der nichts rendert.

Lassen Sie uns unsere Datei src/App.jsx ändern, um dies zu demonstrieren. Wir fügen eine Komponente hinzu, die eine Benachrichtigungsanzahl anzeigt, nur wenn ungelesene Nachrichten vorhanden sind.

Halten Sie den Entwicklungsserver am Laufen. Sie müssen nur die Datei bearbeiten und speichern, um die Änderungen zu sehen.

Ersetzen Sie den Inhalt von src/App.jsx durch den folgenden Code:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

function App() {
  const messages = ["React", "Re: React", "Re:Re: React"];
  // Versuchen Sie, messages in ein leeres Array zu ändern: const messages = [];
  return <Mailbox unreadMessages={messages} />;
}

export default App;

In diesem Beispiel wird das <h2>-Element nur gerendert, weil unreadMessages.length > 0 wahr ist. Wenn Sie das messages-Array in der App-Komponente leer machen (const messages = [];), wird die Bedingung falsch, und das <h2>-Element wird nicht gerendert.

Nachdem Sie die Datei gespeichert haben, überprüfen Sie den Tab Web 8080. Sie sollten die Nachricht "You have 3 unread messages." sehen.

Bedingung in Variable speichern und rendern, wenn wahr

In diesem Schritt lernen Sie, wie Sie Ihre Komponenten übersichtlicher gestalten können, indem Sie den Inhalt vor der return-Anweisung in einer Variable vorbereiten. Dieser Ansatz ist sehr hilfreich, wenn die bedingte Logik komplexer wird, als ein ternärer Operator oder && elegant handhaben kann.

Durch die Verwendung einer Variable können Sie Standard-JavaScript-if-Anweisungen verwenden, um zu entscheiden, was die Komponente rendern soll.

Aktualisieren wir src/App.jsx, um diese Technik zu nutzen. Wir erstellen eine Komponente, die basierend auf einer Prop entweder einen "Login"- oder einen "Logout"-Button anzeigt.

Ersetzen Sie den Inhalt von src/App.jsx durch den folgenden Code:

function LoginButton(props) {
  return <button>Login</button>;
}

function LogoutButton(props) {
  return <button>Logout</button>;
}

function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
      {button}
    </div>
  );
}

function App() {
  return <LoginControl isLoggedIn={false} />;
}

export default App;

In der LoginControl-Komponente deklarieren wir eine Variable button. Dann weist eine if-Anweisung entweder <LoginButton /> oder <LogoutButton /> zu. Schließlich enthält das JSX in der return-Anweisung einfach {button}. Dies hält die Rendering-Logik getrennt und macht die return-Anweisung leichter lesbar.

Speichern Sie die Datei und beobachten Sie die Änderungen im Tab Web 8080. Sie sollten den "Login"-Button sehen. Versuchen Sie, isLoggedIn={false} zu isLoggedIn={true} zu ändern, um stattdessen den "Logout"-Button zu sehen.

Null oder leeres Fragment rendern, wenn falsch

In diesem Schritt behandeln wir ein Szenario, in dem Sie verhindern möchten, dass eine Komponente überhaupt gerendert wird. Dies können Sie erreichen, indem die Komponente null oder ein leeres Fragment (<></>) zurückgibt.

Dies ist ein gängiges Muster für Komponenten, die nur unter bestimmten Bedingungen sichtbar sein sollen. Zum Beispiel ein Warnbanner, das nur erscheinen soll, wenn tatsächlich eine Warnung vorliegt.

Lassen Sie uns src/App.jsx ändern, um eine WarningBanner-Komponente einzufügen, die nur gerendert wird, wenn eine warn-Prop auf true gesetzt ist.

Ersetzen Sie den Inhalt von src/App.jsx durch den folgenden Code:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div style={{ backgroundColor: "yellow", padding: "10px", color: "black" }}>
      Warning!
    </div>
  );
}

function App() {
  // Versuchen Sie, dies auf false zu ändern, um das Banner auszublenden
  const showWarning = true;

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default App;

In der WarningBanner-Komponente prüfen wir zu Beginn die warn-Prop. Wenn sie false ist, gibt die Komponente sofort null zurück, und React rendert nichts dafür. Wenn sie true ist, wird der Warn-div zurückgegeben.

Nachdem Sie die Datei gespeichert haben, überprüfen Sie den Tab Web 8080. Sie werden das gelbe Warnbanner sehen. Gehen Sie nun zurück zu src/App.jsx, ändern Sie const showWarning = true; zu const showWarning = false; und speichern Sie. Das Banner wird von der Seite verschwinden.

Zustand umschalten für bedingte Anzeige

In diesem letzten Schritt kombinieren wir bedingtes Rendering mit dem Zustand (state) von React, um eine interaktive Komponente zu erstellen. Bisher basierten unsere Bedingungen auf Props. Durch die Verwendung von Zustand können wir die Ausgabe der Komponente als Reaktion auf Benutzeraktionen, wie das Klicken auf einen Button, ändern.

Wir werden den useState-Hook verwenden, um den Zustand der Komponente zu verwalten.

Lassen Sie uns src/App.jsx ändern, um eine LoginControl-Komponente zu erstellen, die ihren eigenen isLoggedIn-Zustand verwaltet und es dem Benutzer ermöglicht, diesen umzuschalten.

Zuerst müssen Sie useState aus React importieren. Ersetzen Sie den Inhalt von src/App.jsx durch den folgenden Code:

import { useState } from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

export default App;

Hier ist, was passiert:

1. import { useState } from 'react'; importiert den useState-Hook.
2. const [isLoggedIn, setIsLoggedIn] = useState(false); initialisiert eine Zustandsvariable isLoggedIn mit dem Wert false. setIsLoggedIn ist die Funktion, die wir verwenden, um diesen Zustand zu aktualisieren.
3. Wir definieren die Funktionen handleLoginClick und handleLogoutClick, die setIsLoggedIn aufrufen, um den Zustand zu aktualisieren.
4. Die LoginButton und LogoutButton erhalten die entsprechende Handler-Funktion über ihre onClick-Prop.
5. Die Greeting-Komponente und die Variable button hängen beide vom isLoggedIn-Zustand ab, sodass sie neu gerendert werden, wenn sich der Zustand ändert.

Speichern Sie die Datei und gehen Sie zum Tab Web 8080. Sie sehen die Nachricht "Please sign up." und einen "Login"-Button. Klicken Sie auf den "Login"-Button. Der Zustand wird aktualisiert, und die Benutzeroberfläche ändert sich, um "Welcome back!" und einen "Logout"-Button anzuzeigen.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss dieses Labs zu React Conditional Rendering! Sie haben die gängigsten Techniken zur Steuerung der Anzeige Ihrer Anwendung basierend auf verschiedenen Bedingungen gelernt und geübt.

In diesem Lab haben Sie Folgendes behandelt:

• Verwendung des ternären Operators (? :) für einfache Inline-If-Else-Logik.
• Anwendung des logischen &&-Operators, um ein Element nur dann zu rendern, wenn eine Bedingung erfüllt ist.
• Speichern von JSX in einer Variable, um komplexere Logik mit if-Anweisungen zu handhaben und Ihre return-Anweisung sauber zu halten.
• Rückgabe von null aus einer Komponente, um zu verhindern, dass sie etwas rendert.
• Kombination dieser Techniken mit dem useState-Hook, um dynamische und interaktive Benutzeroberflächen zu erstellen, die auf Benutzeraktionen reagieren.

Diese Muster sind grundlegende Bausteine für fast jede React-Anwendung. Wenn Sie diese beherrschen, können Sie reichhaltige, reaktionsschnelle und benutzerfreundliche Erlebnisse schaffen.