Aus dem Kurs: React Grundkurs
Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 24.700 Kurse von Branchenfachleuten.
Conditional Rendering – Tutorial zu React.js
Aus dem Kurs: React Grundkurs
Conditional Rendering
Im Render-Template selbst wollen wir immer abbilden, wie etwas dargestellt werden soll. Während die Logik, was dargestellt werden soll, in der Regel darüber stattfindet. Aber was ist nun, wenn wir etwas bei bestimmten Bedingungen rendern möchten und andernfalls nicht? Das schauen wir uns in diesem Beispiel an. Auf der Webseite kanye.rest gibt es eine API, bei der wir zufällige Kanye-West-Zitate als JSON laden können. In unserer Applikation wollen wir bei einem Button-Klick jedes Mal ein neues Zitat laden und hinzufügen. Wenn noch keine Zitate vorhanden sind, wollen wir diesen ersten Paragraph anzeigen. Sobald Zitate geladen wurden, wollen wir nun noch den Teil ab "Kanye says" anzeigen. Zuerst definieren wir dafür einen State, wo wir die Zitate ablegen. Als Initialwert für den State benutzen wir hier ein leeres Array. Außerdem brauchen wir einen Button, der bei Klick die API aufruft. Dafür definieren wir eine Funktion callApi, welche wir als onClick-Property an den Button übergeben…
Laden Sie Kurse herunter und lernen Sie auch unterwegs.
Sehen Sie sich Kurse auf Ihrem Mobilgerät ohne Internetverbindung an. Laden Sie Kurse mit der LinkedIn Learning-App für iOS oder Android herunter.