Bedingtes Rendern in React: Dynamisches Rendern von UI-Elementen

Bedingtes Rendering in React: UI basierend auf Bedingungen rendern

Bedingtes Rendern in React bezieht sich auf die Technik des Renderns verschiedener UI-Elemente basierend auf bestimmten Bedingungen oder Zuständen. React bietet mehrere Möglichkeiten zum bedingten Rendern von Komponenten oder Elementen abhängig vom Status oder den Requisiten der Anwendung.

1. Was ist bedingtes Rendering?

Bedingtes Rendering ist das Konzept, bei dem verschiedene Komponenten oder Elemente basierend auf bestimmten Bedingungen gerendert werden. In React wird dies normalerweise durch die Verwendung von JavaScript-Operatoren wie if, ternary oder && innerhalb von JSX erreicht, um zu entscheiden, was angezeigt werden soll.

Warum bedingtes Rendering verwenden?

• Um verschiedene UI-Elemente basierend auf Benutzerinteraktion oder Statusänderungen anzuzeigen.
• Zur Behandlung von Randfällen wie der Anzeige von Ladezuständen, Fehlermeldungen oder Leerzuständen.
• Um dynamisch zwischen verschiedenen Layouts oder Komponenten umzuschalten.

2. Grundlegende bedingte Rendering-Techniken

a. Verwendung der if/else-Anweisung

Der traditionelle Ansatz der Verwendung von if- oder else-Anweisungen kann vor der Rückgabe von JSX verwendet werden. Dies ist besonders nützlich, wenn mehrere Bedingungen überprüft werden müssen.

import React, { useState } from "react";

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

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

b. Verwendung eines ternären Operators

Der ternäre Operator ist eine Abkürzung für die bedingte Darstellung. Dies ist nützlich, wenn Sie ein Element anzeigen möchten, wenn eine Bedingung wahr ist, und ein anderes Element, wenn sie falsch ist.

import React, { useState } from "react";

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

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

c. Verwendung des logischen &&-Operators

Der &&-Operator ist ein Kurzschlussoperator, der ein Element rendert, wenn die Bedingung wahr ist. Dieser Ansatz ist nützlich, wenn Sie etwas nur bedingt ohne einen else-Zweig rendern müssen.

import React, { useState } from "react";

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

  return (
    <>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <button onClick={() => setIsLoggedIn(true)}>Login</button>}
    </>
  );
};

3. Bedingtes Rendern mit Funktionen

Sie können Funktionen auch verwenden, um das bedingte Rendern klarer zu handhaben, insbesondere wenn mehrere Bedingungen überprüft werden müssen.

import React, { useState } from "react";

const MyComponent = () => {
  const [status, setStatus] = useState("loading");

  const renderContent = () => {
    if (status === "loading") {
      return <p>Loading...</p>;
    } else if (status === "error") {
      return <p>Error occurred!</p>;
    } else {
      return <p>Data loaded successfully!</p>;
    }
  };

  return (
    <div>
      {renderContent()}
      <button onClick={() => setStatus("error")}>Simulate Error</button>
      <button onClick={() => setStatus("success")}>Simulate Success</button>
    </div>
  );
};

4. Bedingtes Rendern mit Reaktionskomponenten

Manchmal möchten Sie möglicherweise ganze Komponenten basierend auf einer bestimmten Bedingung rendern.

import React, { useState } from "react";

const Welcome = () => <h1>Welcome back!</h1>;
const Login = () => <button>Login</button>;

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

  return isLoggedIn ? <Welcome /> : <Login />;
};

5. Bedingtes Rendering basierend auf Array-Mapping

Wenn Sie eine Liste von Elementen rendern, kann das bedingte Rendering verwendet werden, um bestimmte Elemente in der Liste selektiv zu rendern.

import React, { useState } from "react";

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

  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <button onClick={() => setIsLoggedIn(true)}>Login</button>;
  }
};

6. Bedingtes Rendering mit useEffect für API-Aufrufe

In vielen Fällen werden Sie Elemente basierend auf den Ergebnissen von API-Aufrufen oder dem asynchronen Datenabruf bedingt rendern. Dies kann mithilfe von Status- und Seiteneffekten mit useEffect.
erfolgen

import React, { useState } from "react";

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

  return (
    <>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>Login</button>
      )}
    </>
  );
};

7. Best Practices für bedingtes Rendering

• Halten Sie es einfach: Vermeiden Sie tief verschachtelte Bedingungen, die das Lesen und Warten des JSX erschweren.
• Hilfsfunktionen verwenden: Wenn Sie mehrere Bedingungen haben, ist es oft sinnvoller, Hilfsfunktionen zum Rendern verschiedener Teile der Benutzeroberfläche zu verwenden.
• Zustand und Requisiten berücksichtigen: Bedingtes Rendering hängt oft vom Zustand oder den Requisiten der Komponente ab. Stellen Sie sicher, dass Randfälle wie Ladezustände, leere Daten und Fehler behandelt werden.

8. Fazit

Bedingtes Rendering ist ein grundlegendes Konzept in React, das es Ihnen ermöglicht, verschiedene UI-Elemente basierend auf dem Status oder den Requisiten anzuzeigen. Mithilfe von Techniken wie if, ternären Operatoren, &&-Operatoren oder sogar Funktionen können Sie die Darstellung Ihrer Komponenten dynamisch anpassen. Das richtige bedingte Rendering trägt zur Verbesserung der Benutzererfahrung bei, indem geeignete Inhalte basierend auf dem Status der App oder der Benutzerinteraktion angezeigt werden.

Das obige ist der detaillierte Inhalt vonBedingtes Rendern in React: Dynamisches Rendern von UI-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!