Kursinhalt
React-Meisterschaft
React-Meisterschaft
Kontext
Kontext in React ist eine leistungsstarke Funktion, die das Teilen von Daten zwischen Komponenten ermöglicht, ohne dass explizites Prop-Passing auf jeder Ebene des Komponentenbaums erforderlich ist. Mit Kontext können wir Daten in der Komponenten-Hierarchie weitergeben, sodass sie für jede Komponente leicht zugänglich sind, unabhängig von ihrer Position im Baum.
Hinweis
Um zu beginnen, lassen Sie uns in die Syntax eintauchen. Wir bieten eine Schritt-für-Schritt-Anleitung, um sicherzustellen, dass Sie jedes Konzept auf dem Weg verstehen. Die Anwendung von Kontext erfordert eine spezifische Code-Implementierung auf verschiedenen Komponentenebenen. Sobald wir die Syntax gründlich behandelt haben, werden wir in ein praktisches Beispiel eintauchen.
Syntax:
1. Schritt: Wir erstellen einen neuen Kontext mit der Funktion createContext()
aus der React-Bibliothek und weisen ihn einer Variablen zu. Dies sollte auf der obersten Ebene der Anwendung geschehen. Typischerweise machen wir dies in einer separaten Datei (z.B. context.js
). Diese wird für das Kontextobjekt verantwortlich sein.
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 App
-Datei umschließen wir alle Komponenten, die Zugriff auf die geteilten Daten benötigen, mit der Provider
-Komponente aus dem erstellten Context
. Die Provider
-Komponente ermöglicht es uns, den Wert des Kontexts zu definieren und ihn allen untergeordneten Komponenten zur Verfügung zu stellen, die diesen Kontext konsumieren.
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 App
-Datei müssen wir auch die Kontextdaten bereitstellen. Dies erreichen wir, indem wir die value
-Eigenschaft für die Context.Provider
-Komponente verwenden. Wir weisen alle erforderlichen Daten der value
-Eigenschaft zu.
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 untergeordneten Komponenten (ChildCompOne
oder ChildCompTwo
) können wir auf die geteilten Daten mit dem useContext
-Hook zugreifen. Um den useContext
-Hook zu verwenden, müssen wir den erstellten Context
aus der context.js
-Datei als Argument übergeben.
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, indem Sie jede Datei und jeden Ordner öffnen, um sicherzustellen, dass Sie den Prozess klar verstehen. Das nächste Kapitel wird mit einem Beispiel fortfahren, das Context und Hooks kombiniert. Dies ermöglicht es Ihnen, zu sehen, wie diese Konzepte in der Praxis zusammenarbeiten.
1. Was ist der Hauptzweck der Verwendung von Context?
2. Welche Funktion wird verwendet, um einen neuen Kontext zu erstellen?
3. Wie stellen Sie die Kontextdaten den Kindkomponenten zur Verfügung?
Danke für Ihr Feedback!