Wie rendert man eine Komponente abhängig von einer…

Normalerweise werden die folgenden Ansätze verwendet:

Bedingtes Rendern mit ternärem Operator oder if: Der einfachste Weg.

// Beispiel mit ternärem Operator in React
function MeinKomponent({ istEingeloggt }) {
  return (
    <div>
      {istEingeloggt ? (
        <p>Hallo, Nutzer!</p>
      ) : (
        <button>Einloggen</button>
      )}
    </div>
  );
}

// Beispiel mit if innerhalb einer funktionalen Komponente
function AnderesKomponent({ lädt }) {
  if (lädt) {
    return <p>Lädt...</p>;
  }
  return <h1>Daten geladen!</h1>;
}

Logisches UND (&&): Nützlich, wenn eine Komponente nur bei wahrer Bedingung angezeigt werden soll.

// Beispiel mit && in React
function Nachrichten({ anzahl }) {
  return (
    <div>
      {anzahl > 0 && <p>Sie haben {anzahl} neue Nachrichten.</p>}
    </div>
  );
}

Verwendung von Funktionen und Kindkomponenten: Ermöglicht das Auslagern der Render-Logik in separate Funktionen oder Komponenten für bessere Lesbarkeit und Wiederverwendbarkeit.

// Beispiel mit Funktion in React
function renderInhalt(benutzerrolle) {
  if (benutzerrolle === 'admin') {
    return <AdminPanel />;
  } else if (benutzerrolle === 'benutzer') {
    return <BenutzerProfil />;
  }
  return <LoginSeite />;
}

function App({ benutzerrolle }) {
  return (
    <div>
      {renderInhalt(benutzerrolle)}
    </div>
  );
}

Arrays und map Methode: Zum Anzeigen einer Liste von Komponenten basierend auf Daten.

// Beispiel mit map in React
function ArtikelListe({ artikel }) {
  return (
    <ul>
      {artikel.map(artikel => (
        <li key={artikel.id}>{artikel.name}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Verbirgt oder zeigt ein Element, aber die Komponente wird weiterhin gerendert. Geeignet für einfache Fälle, in denen der Zustand die DOM-Struktur nicht beeinflusst.

/* Beispiel CSS */
.verstecken {
  display: none;
}

// Beispiel für Anwendung einer CSS-Klasse in React
function UmschaltbarerInhalt({ sichtbar }) {
  return (
    <div className={sichtbar ? '' : 'verstecken'}>
      <p>Dieser Inhalt wird versteckt.</p>
    </div>
  );
}

Die Wahl der Methode hängt von der Komplexität der Bedingung und der Komponentenstruktur ab. Für einfache Bedingungen reichen oft ternärer Operator oder &&. Für komplexere Szenarien und bessere Code-Organisation empfiehlt es sich, separate Funktionen oder Komponenten zu verwenden. CSS display / visibility sollte vorsichtig eingesetzt werden, wenn das Element vollständig aus dem DOM entfernt werden soll.

Wie rendert man eine Komponente abhängig von einer Bedingung?