Context in React ist eine leistungsstarke Funktion, die das Teilen von Daten zwischen Komponenten ermöglicht, ohne dass explizites Weiterreichen von Props auf jeder Ebene des Komponentenbaums erforderlich ist. Mit Context können Daten durch die Komponenten-Hierarchie weitergegeben werden, sodass sie für jede Komponente, unabhängig von ihrer Position im Baum, leicht zugänglich sind.

Hinweis

Zum Einstieg betrachten wir die Syntax im Detail. Es folgt eine schrittweise Anleitung, die das Verständnis jedes Konzepts sicherstellt. Die Anwendung von Context erfordert eine spezifische Code-Implementierung auf verschiedenen Komponentenebenen. Nachdem wir die Syntax umfassend behandelt haben, folgt ein praxisnahes Beispiel.

Syntax:

1. Schritt: Es wird ein neuer Context mit der Funktion createContext() aus der React-Bibliothek erstellt und einer Variablen zugewiesen. Dies sollte auf der obersten Ebene der Anwendung erfolgen. In der Regel geschieht dies in einer separaten Datei (z. B. context.js). Sie ist für das Context-Objekt zuständig.

context.js

import { createContext } from "react";

// Create a new React context using the `createContext` function.
const Context = createContext();

// Export the created context so that it can be used in other parts of the application.
export default Context;

2. Schritt: In der Datei App werden alle Komponenten, die Zugriff auf die geteilten Daten benötigen, mit der Provider-Komponente des erstellten Context umschlossen. Die Provider-Komponente ermöglicht es, den Wert des Contexts zu definieren und allen Kindkomponenten, die diesen Context konsumieren, zur Verfügung zu stellen.

App.jsx

import React from "react";

// Import the `Context` object from `../context`.
import Context from "../context";

// Import child components that need access to the shared data.
import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  return (
    // Wrap the child components with `Context.Provider`.
    <Context.Provider>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

3. Schritt: In der Datei App müssen wir auch die Context-Daten bereitstellen. Dies erreichen wir, indem wir die value-Prop für die Context.Provider-Komponente verwenden. Alle benötigten Daten werden der value-Prop zugewiesen.

App.jsx

import React from "react";

import Context from "../context";

import ChildCompOne from "../ChildCompOne/ChildCompOne";
import ChildCompTwo from "../ChildCompTwo/ChildCompTwo";

const App = () => {
  // Define any data that you want to share across child components.
  const sharedData = "Some shared data";

  return (
    // Provide the shared data as a value to `Context.Provider`.
    <Context.Provider value={sharedData}>
      <ChildCompOne />
      <ChildCompTwo />
    </Context.Provider>
  );
};

export default App;

4. Schritt: In den Kindkomponenten (ChildCompOne oder ChildCompTwo) kann auf die geteilten Daten mit dem useContext-Hook zugegriffen werden. Um den useContext-Hook zu verwenden, muss der erstellte Context aus der Datei context.js als Argument übergeben werden.

ChildCompOne.jsx

import React, { useContext } from "react";

// Import the `Context` object from "../context"
import Context from "../context";

const ChildComponentOne = () => {
  // Use the `useContext` hook to access data from the `Context`
  const data = useContext(Context);

  // You can now use the shared data in this component

  return <div>{data} in the first component</div>;
};

export default ChildComponentOne;

Vollständiger App-Code:

Hinweis

Bitte nehmen Sie sich einen Moment Zeit, um jeden Schritt zu überprüfen und jede Datei sowie jeden Ordner zu öffnen, damit Sie den Prozess klar nachvollziehen können. Im nächsten Kapitel folgt ein Beispiel, das Context und Hooks kombiniert. So können Sie sehen, wie diese Konzepte in der Praxis zusammenwirken.