Kontext in der Praxis

Lassen Sie uns eine Blogquelle über die Planeten erstellen. Wir werden Context verwenden, um Prop-Drilling zu vermeiden. Die App wird aus den folgenden Komponenten bestehen: App, Filter, PlanetList und PlanetItem. Um ihre Hierarchie zu visualisieren, beachten Sie bitte das Bild unten.

Schritt 1

Erstellen Sie den Context in der Datei context.js auf der obersten Ebene.

Schritt 2

Lassen Sie die gesamte App wissen, dass wir Kontext verwenden. Daher müssen wir die gesamte App mit dem Context.Provider im App.jsx-Datei umschließen.

Schritt 3

In diesem Schritt müssen wir die Daten des Kontexts festlegen (value-Prop für die Context.Provider-Komponente). Beginnen wir damit, einige Daten zu rendern. Daten werden in Form eines Arrays von Objekten dargestellt:

Hier ist, was wir tun werden:

Daten aus der data.js-Datei importieren

Den Zustand für die planets als leeres Array mit dem useState-Hook initialisieren.

Den useEffect-Hook verwenden, um die importierten Daten der planets-Variable zuzuweisen. Dies stellt sicher, dass wir Daten zum Rendern haben.

Die Variable appData erstellen, die die gesamten App-Daten darstellt, die ein Objekt mit dem planets-Zustand sein wird.

Die appData-Variable dem value-Prop des Kontextanbieters zuweisen.

Vollständiger Code der App.jsx-Datei nach dem dritten Schritt.

Schritt 4

Werfen wir einen Blick auf die PlanetList-Komponente. Ihr Zweck ist es, ein bestimmtes Markup zu rendern. Innerhalb dieses Markups verwenden wir die PlanetItem-Komponente. Es ist erwähnenswert, dass wir in dieser Komponente keine Props übergeben oder Kontext verwenden, da es auf dieser Ebene nicht erforderlich ist, mit Daten zu arbeiten.

Schritt 5

In diesem Schritt müssen wir auf die Daten zugreifen, um die Informationen über die Planeten zu rendern. Dazu werden wir die folgenden Schritte ausführen:

Den Context aus der context.js-Datei importieren.

Den useContext-Hook verwenden, um die planets-Daten aus dem Kontext abzurufen.

Das Markup mit der map-Funktion rendern, die es uns ermöglicht, über den Datensatz in React zu iterieren. Destructuring anwenden, um auf alle Eigenschaften jedes Planetenobjekts zuzugreifen.

Vollständiger Code der PlanetItem.jsx-Datei nach dem fünften Schritt.

Vollständiger App-Code:

Bitte nehmen Sie sich einen Moment Zeit, um das gesamte Projekt zu überprüfen und dabei auf die allgemeine Funktionalität und Struktur zu achten. Es wird empfohlen, sich zunächst darauf zu konzentrieren, zu verstehen, wie die Daten in den verschiedenen Komponenten übergeben und gerendert werden. Beachten Sie, wie die Daten in den untergeordneten Komponenten, mit Ausnahme der Filter-Komponente, abgerufen und genutzt werden. Die Filter-Komponente wird eine Herausforderung im nächsten Kapitel sein, sodass Sie die Funktionalität der App weiter verbessern können.