Bedingungen

In diesem Tutorial lernst du die Grundlagen und das praktische Know-how zur Erstellung von React-Komponenten – dem Herzstück jeder modernen React-Anwendung. Hier erfährst du, wie man mit JSX und logischen Bedingungen interaktive, dynamisch reagierende Benutzeroberflächen entwickelt.

Inhaltsverzeichnis

Bedingung innerhalb der Funktion

Man kann, ähnlich wie in klassischen JavaScript- oder TypeScript-Strukturen, Bedingungen verwenden, um Werte in Abhängigkeit von Kontext zu erhalten.

            Beispiel: Bedingungen in JSX
        
const DynamicData = () => {
    const username = 'John';
    const currentHour = new Date().getHours();

    let greeting;
    if (currentHour < 12) {
        greeting = 'Guten Morgen';
    } else if (currentHour < 18) {
        greeting = 'Guten Tag';
    } else {
        greeting = 'Guten Abend';
    }

    return (
        <p>{greeting}, {username}</p>
    );
};

export default DynamicData;

Bedingung in der Rückgabeanweisung

Alternativ kann man die Bedingungen auch direkt in Rückgabe-JSX verwenden. Dabei verlagert man die Prüfung von Werten direkt in die Rückgabe-Struktur. Dort muss die besondere Syntax beachtet werden.

            Beispiel: Bedingungen in JSX
        
const DynamicData = () => {
    const username = 'John';
    const currentHour = new Date().getHours();

    return (
        <>
            {currentHour < 12 ? (
                <p>Guten Morgen, {username}</p>
            ) : currentHour < 18 ? (
                <p>Guten Tag, {username}</p>
            ) : (
                <p>Guten Abend, {username}</p>
            )}
        </>
    );
};

export default DynamicData;

In bestimmten Fällen ist es notwendig im JSX-Template zu prüfen, ob eine Liste mindestens ein Element hat, bevor man einen Bereich rendert. So könnte die Verwendung von Bedingungen dabei aussehen.

            SampleConOne.jsx
        
const SampleConOne = () => {
    const items = [
        'Item one',
        'Item two',
        'Item three'
    ];

    return (
        <div className="items_wrapper">
            {items.length > 0 && (
                <ul>
                    {items.map((item, idx) => (
                        <li key={idx}>{item}</li>
                    ))}
                </ul>
            )}
        </div>
    );
};

export default SampleConOne;

In diesem Beispiel wird die Liste der Elemente nur dann ausgegeben, wenn mindestens ein Element in der Liste vorhanden ist.

Manchmal ist allerdings für eine bessere Benutzerfahrung nicht schlecht, wenn ein alternativer Block eine kurze Information darüber ausgibt, dass aktuell keine Elemente vorhanden sind. Für diesen Zweck wird das if-else Konstrukt im JSX-Template verwenden.

            SampleConTwo.jsx
        
const SampleConTwo = () => {
    const items = [];

    return (
        <div className="items_wrapper">
            {items.length > 0 ? (
                <ul>
                    {items.map((item, idx) => (
                        <li key={idx}>{item}</li>
                    ))}
                </ul>
            ) : (
                <p>Keine Elemente vorhanden</p>
            )}
        </div>
    );
};

export default SampleConTwo;

Bedingungen mit mehreren `return` Anweisungen

Man kann auch alternativ den gesamten return Ausdruck in ein Bedingungskonstrukt verpacken.

            Beispiel: Bedingte returns
        
const DynamicData = () => {
    const isLoggedIn = true;

    if (isLoggedIn) {
        return <h1>Willkommen</h1>;
    }

    return <h1>Bitte anmelden</h1>;
};

export default DynamicData;

Bedingte Rückgabe von Components

Anhand von bestimmten Bedingungen, Events oder Zuständen kann man mit Hilfe von Bedingungskonstrukten verschiedene Components zurückgeben.

Für dieses Beispiel werden zwei, nahezu funktionslose, Components erstellt, die einfach die Möglichkeit verdeutlichen sollen.

            ComOne.jsx
        
const ComOne = () => {
    return <p>ComOne</p>;
};

export default ComOne;

            ComTwo.jsx
        
const ComTwo = () => {
    return <p>ComTwo</p>;
};

export default ComTwo;

Nun kann man in einem ExampleCom irgendein Wert prüfen und anhand von diesem Wert entscheiden, welches Component ausgeliefert wird.

            ExampleCom.jsx
        
import ComOne from './ComOne';
import ComTwo from './ComTwo';

const ExampleCom = () => {
    const isActive = true;

    if (isActive) {
        return <ComOne />
    }

    return <ComTwo />
};

export default ExampleCom;

Alternativ kann man die Schreibweise etwas verkürzen.

            ExampleCom.jsx
        
import ComOne from './ComOne';
import ComTwo from './ComTwo';

const ExampleCom = () => {
    const isActive = true;
    return isActive ? <ComOne /> : <ComTwo />;
};

export default ExampleCom;

navigation Navigation