Hook kontekstu useContext w React

W tej lekcji kontynuujemy pracę z kontekstem. Teraz zbudujemy drzewo komponentów. Na początku w osobnym pliku utwórzmy komponent React BigBox:

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

Zaimportujmy go i umieśćmy w naszym głównym komponencie App:

import BigBox from './BigBox';

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

Dla większej przejrzystości nieco ostylujmy divy. W tym celu utwórzmy plik styles.css:

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

Nie zapomnijmy go zaimportować w App.js:

import './styles.css';

Teraz w osobnym pliku utwórzmy komponent MiddleBox:

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

I umieśćmy go w dużym pudełku BigBox:

import MiddleBox from './MiddleBox';

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

Zróbmy to samo z małym pudełeczkiem SmallBox:

function SmallBox() {
	return (
		<p>Ja jestem ... </p>
	);
}

Umieśćmy dwa takie pudełeczka w MiddleBox:

import SmallBox from './SmallBox';

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

Drzewo zbudowaliśmy. A teraz chcemy z naszego App przekazać, przypuśćmy, do SmallBox łańcuchową wartość 'small box :)', nie używając propsów, a korzystając z kontekstu (nagle nasza pudełkowa aplikacja rozrośnie się do ogromnych rozmiarów).

Plik z kontekstem MyContext.js my już utworzyliśmy i podłączyliśmy w poprzedniej lekcji.

Następny krok, który zrobimy - opakujemy BigBox w dostawcę kontekstu, który jest właściwością naszego obiektu kontekstu MyContext. Teraz wszystkie komponenty, zawarte w tej konstrukcji (a to i wszystkie pudełeczka, zagnieżdżone w BigBox) będą mogły uzyskać dostęp i subskrybować zmiany kontekstu. Jako wartość kontekstu przekazujemy pożądaną 'small box :)':

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

A teraz pozostało odczytać wartość kontekstu. Chcieliśmy użyć jej w SmallBox, więc zaimportujmy tam plik kontekstu MyContext.js i hook useContext:

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

Odczytywanie za pomocą useContext wartości kontekstu do zmiennej name:

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

Subskrybowaliśmy SmallBox na ten kontekst i, jeśli się zmieni, ten komponent również zostanie zaktualizowany.

I, na koniec, podstawiamy wartość zmiennej name zamiast wielokropka:

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

W pustym komponencie App utwórz komponent Parent, a w nim komponent Daughter, a w Daughter komponent Grandson. Używając kontekstu, przekaż z App wartość wieku 42, a za pomocą useContext wyświetl go w komponencie Daughter.

A teraz w komponencie Grandson wyświetl wartość wieku, ale podzieloną przez 2.