Listen, Keys und bedingtes Rendern
Rendern Sie Element-Arrays mit .map(), geben Sie stabile key-Props an und rendern Sie Elemente mit && sowie dem ternären Operator bedingt.
Listen, Keys und bedingtes Rendern ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Listen mit .map() rendern
Rendern Sie eine dynamische Liste, indem Sie .map() auf einem Array aufrufen und für jedes Element JSX zurückgeben. React rendert ein Array von Elementen genauso wie ein einzelnes Element.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);Die key-Prop — Warum sie wichtig ist
key ist eine spezielle React-Prop, die React dabei hilft zu erkennen, welche Elemente einer Liste geändert, hinzugefügt oder entfernt wurden. Ohne Keys (oder mit instabilen Keys wie Array-Indizes) kann React falsche Aktualisierungen erzeugen.
Gute und schlechte Keys
Gute Keys: eindeutige, stabile IDs aus Ihren Daten (z. B. item.id). Schlechte Keys: Array-Indizes (Elemente können neu angeordnet werden) oder zufällige Werte (ändern sich bei jedem Rendern).
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Objekte rendern
Ordnen Sie ein Array von Objekten Komponenten zu und destrukturieren Sie das Objekt in Props.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);Bedingtes Rendern mit &&
Verwenden Sie den &&-Kurzschlussoperator, um JSX bedingt einzufügen. Wenn die linke Seite falsy ist, wird nichts gerendert. Achten Sie auf falsy Zahlen – 0 wird als „0“ gerendert.
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Bedingtes Rendern mit dem Ternary-Operator
Verwenden Sie den Ternary-Operator, um abhängig von einer Bedingung eines von zwei Elementen zu rendern.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Bedingtes Rendern mit einer if-Anweisung
Verwenden Sie bei komplexen Bedingungen eine if-Anweisung vor dem return. Geben Sie bei Lade- oder Fehlerzuständen frühzeitig einen Wert zurück.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Vor dem Mapping filtern
Filtern Sie das Array vor dem Mapping, um nur passende Elemente zu rendern. Das ist übersichtlich und gut lesbar.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Leerer Zustand
Behandeln Sie stets den Fall eines leeren Arrays. Eine leere Liste stillschweigend zu rendern, ist verwirrend – zeigen Sie stattdessen eine hilfreiche Meldung für den leeren Zustand an.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Portale zum Rendern von Listen
Lange Listen, die in einem anderen DOM-Knoten erscheinen sollen, etwa in einem Dropdown, können ReactDOM.createPortal verwenden. Das meiste Rendern von Listen erfolgt jedoch unkompliziert innerhalb des Baums.
Virtualisierte Listen für bessere Performance
Verwenden Sie für sehr lange Listen (1.000 oder mehr Elemente) eine Bibliothek zur Virtualisierung wie react-window oder @tanstack/react-virtual. Diese rendern nur sichtbare Zeilen und vermeiden dadurch Performance-Probleme im DOM.
Kurztest
Wann ist es akzeptabel, den Array-Index als key in React-Listen zu verwenden?
Zusammenfassung: Listen und bedingtes Rendern
Rendern Sie Listen mit .map(). Fügen Sie immer stabile, eindeutige Key-Props hinzu. Verwenden Sie && für optionale Elemente (achten Sie auf 0). Verwenden Sie den ternären Operator für Entweder-oder-Fälle. Nutzen Sie vorzeitige Rückgaben für Lade- und Fehlerzustände. Filtern Sie vor dem Mapping, wenn Sie Listen bedingt rendern. Zeigen Sie bei leeren Arrays eine Meldung für den leeren Zustand an. Virtualisieren Sie sehr lange Listen.
Häufig gestellte Fragen
Ist die Lektion „Listen, Keys und bedingtes Rendern“ kostenlos?
Ja — der vollständige Text von „Listen, Keys und bedingtes Rendern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Listen, Keys und bedingtes Rendern“?
Rendern Sie Element-Arrays mit .map(), geben Sie stabile key-Props an und rendern Sie Elemente mit && sowie dem ternären Operator bedingt. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Listen, Keys und bedingtes Rendern“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- JSX: Syntax und Transpilierung
- Funktionale Komponenten und Props
- useState-Hook: State und erneute Renderings
- Listen, Keys und bedingtes Rendern