Bedingtes Rendering ist eine leistungsstarke Funktion in React, die es Entwicklern ermöglicht, Komponenten basierend auf bestimmten Bedingungen zu rendern.

Es ist ein grundlegendes Konzept, das bei der Entwicklung dynamischer und interaktiver Webanwendungen eine wichtige Rolle spielt.

In diesem umfassenden Leitfaden tauchen wir tief in das bedingte Rendering in React ein und erläutern grundlegende und fortgeschrittene Techniken anhand von Beispielen, damit du sie richtig verstehst.

Das bedingte Rendering in React verstehen

Das bedingte Rendering in React ermöglicht es Entwicklern, dynamisch zu steuern, welche Inhalte auf dem Bildschirm angezeigt werden, und zwar auf der Grundlage bestimmter Werte, die in einer Variablen, einem Status oder einer Requisite gespeichert werden können.

Das kann sehr nützlich sein, wenn du bestimmte UI-Elemente ein- oder ausblenden, das Layout einer Seite ändern oder verschiedene Inhalte auf Basis von Benutzerinteraktionen darstellen willst.

Das bedingte Rendering ist in React-Anwendungen wichtig, weil es dir ermöglicht, dynamische und interaktive Benutzeroberflächen zu erstellen, die in Echtzeit auf veränderte Daten und Benutzerinteraktionen reagieren können.

Es trägt dazu bei, die Leistung und Effizienz deiner Anwendungen zu verbessern, indem es das unnötige Rendering von Komponenten oder Elementen, die nicht benötigt werden, vermeidet.

Grundlegende Techniken für bedingtes Rendering

Es gibt mehrere grundlegende Techniken, die du für das bedingte Rendering in React verwenden kannst. Lass uns jede von ihnen im Detail untersuchen.

Verwendung der if-Anweisung für bedingtes Rendering

Eine der einfachsten Möglichkeiten, das bedingte Rendering in React zu implementieren, ist die Verwendung der traditionellen if Anweisung.

if (condition) {
    return <p>Expression 1</p>;
  } else {
    return <p>Expression 2</p>;
  }

Die JavaScript-Anweisung if kann in der Methode render() deiner Komponente verwendet werden, um Inhalte abhängig von einer bestimmten Bedingung zu rendern.

Du kannst die if-Anweisung zum Beispiel verwenden, um einen Lade-Spinner anzuzeigen, während du darauf wartest, dass Daten geladen werden:

import { useState, useEffect } from 'react';
import Spinner from './Spinner';

const MyComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetch data from an API
    fetch('https://example.com/data')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setIsLoading(false);
      });
  }, []);

  if (isLoading) {
    return <Spinner />;
  }

  return <div>{/* Render the data here */}</div>;
};

export default MyComponent;

In diesem Beispiel holt MyComponent mit dem Hook useEffect Daten von einer API ab. Während wir darauf warten, dass die Daten geladen werden, zeigen wir mit der Anweisung if eine Spinner-Komponente an.

Ein anderes Beispiel ist das Rendern einer Fallback-UI, wenn beim Rendern deiner Komponente ein Fehler auftritt:

const MyComponent = ({ data }) => {
  if (!data) {
    return <p>Something went wrong. Please try again later.</p>;
  }

  return <div>{/* Render the data here */}</div>;
};

export default MyComponent;

In diesem Code haben wir eine MyComponent, die eine data Anweisung annimmt. Wenn die Requisite data fehlerhaft ist, wird mit der Anweisung if eine Fehlermeldung angezeigt.

Schließlich kannst du mit der Anweisung if unterschiedliche Inhalte für verschiedene Benutzerrollen anzeigen:

const MyComponent = ({ user }) => {
  if (user.role === 'admin') {
    return <p>Welcome, admin!</p>;
  } else if (user.role === 'user') {
    return <p>Welcome, user!</p>;
  } else {
    return <p>You are not authorized to access this page.</p>;
  }
};

export default MyComponent;

In diesem Code haben wir eine MyComponent, die eine user -Anweisung benötigt. Abhängig von der Eigenschaft user.role zeigen wir mit der Anweisung if unterschiedliche Inhalte an.

Verwendung des ternären Operators für bedingtes Rendering

Eine weitere Möglichkeit, bedingtes Rendering in React zu implementieren, ist die Verwendung des ternären Operators in JSX.

Mit dem ternären Operator kannst du eine kompakte Inline if-else-Anweisung schreiben, indem du 3 Operanden angibst. Der erste Operand ist die Bedingung, während die beiden anderen Operanden die Ausdrücke sind. Wenn die Bedingung true lautet, wird der erste Ausdruck ausgeführt, andernfalls der zweite Ausdruck.

Du kannst zum Beispiel verschiedene Komponenten auf der Grundlage einer Requisite darstellen:

import ComponentA from './ComponentA';
import ComponentB from './ComponentB';

const ExampleComponent = ({ shouldRenderComponentA }) => {
  return (
    <div>
      {shouldRenderComponentA ? <ComponentA /> : <ComponentB />}
    </div>
  );
};

export default ExampleComponent;

In diesem Code haben wir eine ExampleComponent, die eine Requisite namens shouldRenderComponentA annimmt. Wir verwenden den ternären Operator, um abhängig vom Prop-Wert entweder ComponentA oder ComponentB darzustellen.

Du kannst auch einen anderen Text basierend auf einem Zustand darstellen:

import { useState } from 'react';

const ExampleComponent = () => {
  const [showMessage, setShowMessage] = useState(false);

  return (
    <div>
      <button onClick={() => setShowMessage(!showMessage)}>
        {showMessage ? 'Hide message' : 'Show message'}
      </button>
      {showMessage ? <p>Hello, world!</p> : null}
    </div>
  );
};

export default ExampleComponent;

In diesem Beispiel verwenden wir den ternären Operator, um abhängig vom Wert des Zustands showMessage einen anderen Text darzustellen. Wenn du auf die Schaltfläche klickst, wird der Wert von showMessage umgeschaltet und der Text entsprechend angezeigt oder ausgeblendet.

Schließlich kannst du einen Lade-Spinner darstellen, während die Daten abgerufen werden:

import { useState, useEffect } from 'react';
import Spinner from './Spinner';

const ExampleComponent = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      const jsonData = await response.json();
      setData(jsonData);
      setIsLoading(false);
    };
    fetchData();
  }, []);

  return (
    <div>
      {isLoading ? <Spinner /> : <p>{data.title}</p>}
    </div>
  );
};

export default ExampleComponent;

In diesem Beispiel verwenden wir den ternären Operator, um einen Lade-Spinner anzuzeigen, während Daten von einer API abgerufen werden. Sobald die Daten verfügbar sind, wird die Eigenschaft title mithilfe des ternären Operators dargestellt.

Logische AND- und OR-Operatoren für bedingtes Rendering verwenden

Du kannst auch die logischen Operatoren AND (&&) und OR (||) verwenden, um ein bedingtes Rendering in React zu implementieren.

Der logische AND-Operator ermöglicht es dir, eine Komponente nur dann zu rendern, wenn eine bestimmte Bedingung erfüllt ist, während der logische OR-Operator es dir ermöglicht, eine Komponente zu rendern, wenn eine der beiden Bedingungen erfüllt ist.

Diese Operatoren sind nützlich, wenn du einfache Bedingungen hast, die bestimmen, ob eine Komponente gerendert werden soll oder nicht. Wenn du zum Beispiel eine Schaltfläche nur darstellen willst, wenn ein Formular gültig ist, kannst du den logischen UND-Operator wie folgt verwenden:

import { useState } from 'react';

const FormComponent = () => {
  const [formValues, setFormValues] = useState({ username: "", password: "" });

  const isFormValid = formValues.username && formValues.password;

  const handleSubmit = (event) => {
    event.preventDefault();
    // Submit form data
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formValues.username}
        placeholder="Type Username..."
        onChange={(e) =>
          setFormValues({ ...formValues, username: e.target.value })
        }
      />
      <br />
      <input
        type="password"
        value={formValues.password}
        placeholder="Type Password..."
        onChange={(e) =>
          setFormValues({ ...formValues, password: e.target.value })
        }
      />
      {isFormValid && <button type="submit">Submit</button>}
    </form>
  );
};

export default FormComponent;

In diesem Beispiel haben wir ein FormComponent, das ein Formular mit zwei Eingabefeldern für username und password enthält. Wir verwenden den Hook useState, um die Formularwerte zu verwalten, und die Variable isFormValid, um zu prüfen, ob beide Eingabefelder Werte enthalten. Mit dem logischen UND-Operator (&&) wird der Submit-Button nur angezeigt, wenn isFormValid wahr ist. Dadurch wird sichergestellt, dass die Schaltfläche nur aktiviert wird, wenn das Formular gültig ist.

In ähnlicher Weise kannst du den OR-Operator verwenden, um eine Lademeldung auszugeben, wenn die Daten noch geladen werden, oder eine Fehlermeldung, wenn ein Fehler auftritt:

import React, { useEffect, useState } from 'react';

const DataComponent = () => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        setData(data);
      } catch (error) {
        setErrorMessage('An error occurred while fetching data.');
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      {errorMessage || isLoading ? (
        <p>{errorMessage || 'Loading...'}</p>
      ) : (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </>
  );
};

export default DataComponent;

In diesem Beispiel holt DataComponent mit fetch Daten von einer API ab und zeigt sie in einer Liste an. Wir verwenden den useState Hook, um die Daten, den Ladezustand und die Fehlermeldung zu verwalten. Mit dem logischen ODER-Operator (||) können wir eine Lade- oder eine Fehlermeldung anzeigen, wenn eine der beiden Bedingungen erfüllt ist. So wird sichergestellt, dass der Nutzer eine Meldung sieht, die den aktuellen Stand des Datenabrufs anzeigt.

Die Verwendung der logischen Operatoren AND und OR für das bedingte Rendering in React ist eine übersichtliche und lesbare Methode, um einfache Bedingungen zu behandeln. Für komplexere Logik ist es jedoch besser, andere Ansätze wie die switch Anweisungen zu verwenden.

Fortgeschrittene Techniken für bedingtes Rendering

Das bedingte Rendering in React kann je nach den Anforderungen deiner Anwendung komplexer sein. Hier sind einige fortgeschrittene Techniken, die du für das bedingte Rendering in komplexeren Szenarien verwenden kannst.

Verwendung von Switch-Anweisungen für bedingtes Rendering

Während if-Anweisungen und ternäre Operatoren gängige Ansätze für das bedingte Rendering sind, kann manchmal eine switch Anweisung besser geeignet sein, vor allem wenn es um mehrere Bedingungen geht.

Hier ist ein Beispiel:

import React from 'react';
const MyComponent = ({ userType }) => {
  switch (userType) {
    case 'admin':
      return <p>Welcome, admin user!</p>;
    case 'user':
      return <p>Welcome, regular user!</p>;
    default:
      return <p>Please log in to continue.</p>;
  }
};
export default MyComponent;

In diesem Code wird eine switch Anweisung verwendet, um Inhalte auf der Grundlage der userType Requisite bedingt darzustellen. Dieser Ansatz kann hilfreich sein, wenn es um mehrere Bedingungen geht, und bietet eine übersichtlichere und besser lesbare Möglichkeit, komplexe Logik zu handhaben.

Bedingtes Rendering mit React Router

React Router ist eine beliebte Library für das clientseitige Routing in React-Anwendungen. Mit React Router kannst du Komponenten basierend auf der aktuellen Route bedingt rendern.

Hier ist ein Beispiel für die Implementierung von bedingtem Rendering mit React Router:

import { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './components/Home';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import NotFound from './components/NotFound';

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

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/login">
          <Login setIsLoggedIn={setIsLoggedIn} />
        </Route>
        {isLoggedIn ? (
          <Route path="/dashboard" component={Dashboard} />
        ) : (
          <Route component={NotFound} />
        )}
      </Switch>
    </Router>
  );
};

export default App;

In diesem Code verwenden wir den Status isLoggedIn, um entweder die Komponente Dashboard zu rendern, wenn der Nutzer eingeloggt ist, oder die Komponente NotFound, wenn der Nutzer nicht eingeloggt ist. Die Komponente Login setzt den Status isLoggedIn auf true, sobald sich der Nutzer erfolgreich angemeldet hat.

Beachte, dass wir die Requisiten der Komponente <Route> verwenden, um die Komponente Login und die Funktion setIsLoggedIn zu übergeben. So können wir Requisiten an die Komponente Login übergeben, ohne sie in der Requisite path anzugeben.

Zusammenfassung

Das bedingte Rendering ist eine leistungsstarke Technik in React, mit der du die Benutzeroberfläche dynamisch auf der Grundlage verschiedener Bedingungen aktualisieren kannst.

Je nachdem, wie komplex die UI-Logik deiner Anwendung ist, kannst du den Ansatz wählen, der am besten zu deinen Bedürfnissen passt.

Denke daran, deinen Code sauber, übersichtlich und lesbar zu halten, und teste deine bedingte Rendering-Logik immer gründlich, um sicherzustellen, dass sie in verschiedenen Szenarien wie erwartet funktioniert.

Suchst du nach der idealen Hosting-Lösung für deine React-Anwendungen? Teste das Anwendungs-Hosting von Kinsta kostenlos!

Joel Olawanle Kinsta

Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.