Der useContext-Hook in React

In dieser Lektion setzen wir unsere Arbeit mit dem Kontext fort. Jetzt bauen wir einen Baum von Komponenten. Zuerst erstellen wir in einer separaten Datei eine React-Komponente BigBox:

function BigBox() {
	return (
		<p>bigbox</p>
	);
}

Importieren wir sie und platzieren sie in unserer Hauptkomponente App:

import BigBox from './BigBox';

function App() {
	return (
		<BigBox />
	);
}

Zur besseren Visualisierung stylen wir die Divs ein wenig. Styling. Dazu erstellen wir die Datei styles.css:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

Vergessen wir nicht, sie in App.js zu importieren:

import './styles.css';

Jetzt erstellen wir in einer separaten Datei die Komponente MiddleBox:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

Und legen sie in die große Box BigBox:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

Machen wir dasselbe mit der kleinen Box SmallBox:

function SmallBox() {
	return (
		<p>I am ... </p>
	);
}

Platzieren wir zwei solche Boxen in MiddleBox:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

Den Baum haben wir aufgebaut. Und jetzt wollen wir von unserer App aus, nehmen wir an, an SmallBox einen String-Wert 'small box :)' übermitteln, ohne Props zu verwenden, sondern indem wir uns des Kontexts bedienen (falls sich unsere Boxen-App zu einer riesigen Größe entwickelt).

Die Datei mit dem Kontext MyContext.js haben wir bereits in der letzten Lektion erstellt und eingebunden.

Der nächste Schritt, den wir unternehmen - wir umschließen BigBox mit dem Kontext-Provider, der eine Eigenschaft unseres Kontextobjekts MyContext ist. Nun können alle Komponenten, die in diese Konstruktion eingeschlossen sind (und das sind alle Boxen, die in BigBox verschachtelt sind), auf den Kontext zugreifen und sich auf Änderungen des Kontexts abonnieren. Als Wert des Kontexts übergeben wir den gewünschten 'small box :)':

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
		</MyContext.Provider>
	);
}

Und nun bleibt nur noch, den Wert des Kontexts auszulesen. Wir wollten ihn in SmallBox verwenden, also importieren wir dorthin die Kontextdatei MyContext.js und den Hook useContext:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

Lesen wir mit useContext den Kontextwert in die Variable name:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>I am ... </p>
		</div>
	);
}

Wir haben SmallBox auf diesen Kontext abonniert und, falls er sich ändert, wird diese Komponente ebenfalls aktualisiert.

Und schließlich setzen wir den Wert der Variable name an die Stelle der Auslassungspunkte:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>I am {name} </p>
		</div>
	);
}

Erstellen Sie in der leeren Komponente App die Komponente Parent, und darin die Komponente Daughter, und in Daughter die Komponente Grandson. Verwenden Sie den Kontext, um von App den Wert des Alters 42 zu übergeben, und geben Sie ihn mit Hilfe von useContext in der Komponente Daughter aus.

Und jetzt geben Sie in der Komponente Grandson den Wert des Alters aus, aber geteilt durch 2.