ReactJS - Bedingtes Rendern

Hallo da draußen, zukünftige React-Entwickler! Heute tauchen wir in eine der kraftvollsten Funktionen von React ein: das bedingte Rendern. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind; ich werde Sie durch dieses Konzept Schritt für Schritt führen, genau wie ich es in den letzten Jahren für unzählige Schüler getan habe. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und lassen Sie uns gemeinsam diese aufregende Reise antreten!

Was ist Bedingtes Rendern?

Bevor wir uns den React-spezifischen Dingen zuwenden, lassen Sie uns darüber sprechen, was bedingtes Rendern eigentlich bedeutet. Stellen Sie sich vor, Sie erstellen eine magische Grußkarte. Abhängig davon, ob es Tag oder Nacht ist, soll die Karte entweder "Guten Morgen!" oder "Guten Abend!" sagen. Das ist bedingtes Rendern in der Kürze – verschiedene Inhalte basierend auf bestimmten Bedingungen anzeigen.

In React funktioniert bedingtes Rendern auf ähnliche Weise. Es ermöglicht uns, dynamische Benutzeroberflächen zu erstellen, die sich basierend auf verschiedenen Bedingungen oder Zuständen in unserer Anwendung ändern können.

Bedingtes Rendern in React

Nun sehen wir, wie wir bedingtes Rendern in React implementieren können. Wir beginnen mit den einfachsten Methoden und bewegen uns schrittweise zu fortgeschritteneren Techniken.

1. Verwenden von if/else-Anweisungen

Der direkteste Weg, bedingtes Rendern zu implementieren, ist die Verwendung von guten alten if/else-Anweisungen. Sehen wir uns ein Beispiel an:

function Greeting({ isLoggedIn }) {
if (isLoggedIn) {
return <h1>Willkommen zurück!</h1>;
} else {
return <h1>Bitte melden Sie sich an.</h1>;
}
}

In diesem Beispiel haben wir einen Greeting-Komponenten, der ein Prop isLoggedIn annimmt. Abhängig davon, ob der Benutzer angemeldet ist oder nicht, gibt er不同的 JSX zurück.

2. Verwenden von Ternären Operatoren

Während if/else-Anweisungen gut funktionieren, können sie unseren Code etwas umständlich machen. Hier kommt der ternäre Operator – einewicklungsärmerer Weg, bedingungen zu schreiben:

function Greeting({ isLoggedIn }) {
return (
<h1>
{isLoggedIn ? 'Willkommen zurück!' : 'Bitte melden Sie sich an.'}
</h1>
);
}

Dies tut genau dasselbe wie unser vorheriges Beispiel, aber in einer viel kompakteren Form. Es ist wie das Schweizer Taschenmesser des bedingten Renderns!

3. Verwenden des logischen && Operators

Manchmal möchten Sie nur etwas rendern, wenn eine Bedingung wahr ist, und nichts rendern, wenn sie falsch ist. In solchen Fällen kommt der logische && Operator gelegen:

function Notification({ hasUnreadMessages }) {
return (
<div>
{hasUnreadMessages &&
<p>Sie haben neue Nachrichten!</p>
}
</div>
);
}

In diesem Beispiel wird das <p>-Element nur gerendert, wenn hasUnreadMessages wahr ist. Wenn es falsch ist, wird nichts an seiner Stelle gerendert.

4. Verwenden von Switch-Anweisungen

Wenn Sie mehrere Bedingungen überprüfen müssen, kann eine Switch-Anweisung eine saubere Methode zum bedingten Rendern sein:

function WeatherForecast({ weather }) {
switch(weather) {
case 'sunny':
return <p>Es ist ein schöner Tag!</p>;
case 'rainy':
return <p>Vergessen Sie nicht Ihren Schirm!</p>;
case 'snowy':
return <p-Packen Sie sich warm ein, draußen ist es kalt!</p>;
default:
return <p>Wettervorhersage nicht verfügbar.</p>;
}
}

Dieser Ansatz ist besonders nützlich, wenn Sie mehrere unterschiedliche Fälle behandeln müssen.

5. Bedingtes Rendern von Komponenten

Manchmal möchten Sie ganze Komponenten bedingt rendern. Hier ist, wie Sie das tun können:

function Dashboard({ isAdmin }) {
return (
<div>
<h1>Willkommen auf Ihrem Dashboard</h1>
{isAdmin && <AdminPanel />}
<UserPanel />
</div>
);
}

In diesem Beispiel wird die AdminPanel-Komponente nur gerendert, wenn isAdmin wahr ist, während die UserPanel-Komponente immer gerendert wird.

Fortgeschrittene Techniken

Nun, da wir die Grundlagen abgedeckt haben, schauen wir uns einige fortgeschrittene Techniken für das bedingte Rendern an.

6. Verwenden von Objekten für das Bedingte Rendern

Manchmal finden Sie sich mit vielen Bedingungen wieder. In solchen Fällen kann die Verwendung eines Objekts Ihren Code besser wartbar machen:

const PAGES = {
home: <HomePage />,
about: <AboutPage />,
contact: <ContactPage />,
};

function App({ currentPage }) {
return (
<div>
{PAGES[currentPage] || <NotFoundPage />}
</div>
);
}

Dieser Ansatz ist besonders nützlich, wenn Sie viele unterschiedliche Seiten oder Komponenten basierend auf einer Bedingung rendern müssen.

7. Bedingtes Rendern mit HOCs

Higher-Order Components (HOCs) können auch für das bedingte Rendern verwendet werden. Hier ist ein einfaches Beispiel:

function withAuth(Component) {
return function AuthenticatedComponent(props) {
const isAuthenticated = checkAuthStatus(); // Implementieren Sie diese Funktion
if (isAuthenticated) {
return <Component {...props} />;
} else {
return <LoginPage />;
}
}
}

const ProtectedPage = withAuth(SecretPage);

Diese HOC fügt jede Komponente, die sie umgibt, eine Authentifizierungslogik hinzu und rendert die Komponente nur, wenn der Benutzer authentifiziert ist.

Schlussfolgerung

Bedingtes Rendern ist ein leistungsfähiges Werkzeug in Ihrem React-Werkzeugkasten. Es ermöglicht Ihnen, dynamische, reaktive Benutzeroberflächen zu erstellen, die sich an wechselnde Daten und Benutzerinteraktionen anpassen können. Wie bei jedem programmatischen Konzept ist der Schlüssel zum Beherrschen des bedingten Renderns die Übung. Versuchen Sie, diese Techniken in Ihren eigenen Projekten zu implementieren, und bald werden Sie wie ein Profi bedingt rendern können!

Denken Sie daran, dass es keine eine "richtige" Methode gibt, um bedingtes Rendern durchzuführen. Die beste Methode hängt von Ihrem spezifischen Use Case und Ihren persönlichen (oder Team-)Präferenzen ab. Also experimentieren Sie, haben Sie Spaß und viel Spaß beim Programmieren!

Credits: Image by storyset