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.

01 · Abschnitt

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.

TypeScript 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;
02 · Abschnitt

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.

TypeScript 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.

TypeScript 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.

TypeScript 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;
03 · Abschnitt

Bedingungen mit mehreren return Anweisungen

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

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

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

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

export default DynamicData;
04 · Abschnitt

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.

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

export default ComOne;
TypeScript 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.

TypeScript 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.

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

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

export default ExampleCom;
/ Weiter

Zurück zu Components

Zur Übersicht