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.

import { createContext } from "react";

const Context = createContext();

export default Context;

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.

import React from "react";
import Context from "../context";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";

const App = () => {
  return (
    <Context.Provider>
      <div>
        <Filter />
        <PlanetList />
      </div>
    </Context.Provider>
  );
};

export default App;

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:

const planetData = [
  {
    id: "3a6d44da-bbe2-4ac2-a622-7ca5f321b71c",
    name: "Mercury",
    weight: "3.3011 × 10^23 kg",
    size: "4,879 km",
    distanceFromSun: "57.9 million km",
    material: "Rocky",
    image:
      "https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/react/react-hooks-%26-context/mercury.png",
    existenceYears: "4.5 billion years",
  },
... 
  {...}
];

Hier ist, was wir tun werden:

Daten aus der data.js-Datei importieren

import data from "../data";

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

import React, { useState } from "react";
// ...
const [planets, setPlanets] = useState([]);

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

import React, { useState, useEffect } from "react";
// ...
  useEffect(() => {
    setPlanets(data);
  }, []);

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

const appData = { planets };

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

return (
  <Context.Provider value={appData}>
    <div>
      <Filter />
      <PlanetList />
    </div>
  </Context.Provider>
);

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

import React, { useEffect, useState } from "react";
import Context from "../context";
import data from "../data";
import Filter from "../Filter/Filter";
import PlanetList from "../PlanetList/PlanetList";

const App = () => {
  const [planets, setPlanets] = useState([]);

  useEffect(() => {
    setPlanets(data);
  }, []);

  const appData = { planets };

  return (
    <Context.Provider value={appData}>
      <div>
        <Filter />
        <PlanetList />
      </div>
    </Context.Provider>
  );
};

export default App;

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.

import React from "react";
import PlanetItem from "../PlanetItem/PlanetItem";

const PlanetList = () => {
  return (
    <ul>
      <PlanetItem />
    </ul>
  );
};

export default PlanetList;

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.

import Context from "../context";

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

import React, { useContext } from "react";
// ...
const { planets } = useContext(Context);

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.

return (
  <>
    {planets.map(
      ({
        id,
        name,
        weight,
        size,
        distanceFromSun,
        material,
        image,
        existenceYears,
      }) => (
        <li key={id}>
          <img src={image} alt={name} width={160} />
          <div>
            <h3>{name}</h3>
            <p>
              Weight: <span>{weight}</span>
            </p>
            <p>
              Size: <span>{size}</span>
            </p>
            <p>
              Distance form Sun: <span>{distanceFromSun}</span>
            </p>
            <p>
              Material: <span>{material}</span>
            </p>
            <p>
              Old: <span>{existenceYears}</span>
            </p>
          </div>
        </li>
      )
    )}
  </>
);

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

import React, { useContext } from "react";
import Context from "../context";

const PlanetItem = () => {
  const { planets } = useContext(Context);

  return (
    <>
      {planets.map(
        ({
          id,
          name,
          weight,
          size,
          distanceFromSun,
          material,
          image,
          existenceYears,
        }) => (
          <li key={id}>
            <img src={image} alt={name} width={160} />
            <div>
              <h3>{name}</h3>
              <p>
                Weight: <span>{weight}</span>
              </p>
              <p>
                Size: <span>{size}</span>
              </p>
              <p>
                Distance form Sun: <span>{distanceFromSun}</span>
              </p>
              <p>
                Material: <span>{material}</span>
              </p>
              <p>
                Old: <span>{existenceYears}</span>
              </p>
            </div>
          </li>
        )
      )}
    </>
  );
};

export default PlanetItem;

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.