Kontextový hook useContext v Reactu

V této lekci budeme pokračovat v práci s kontextem. Nyní postavíme strom komponent. Pro začátek v samostatném souboru vytvoříme React komponentu BigBox:

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

Importujeme ji a umístíme ji v naší hlavní komponentě App:

import BigBox from './BigBox';

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

Pro větší názornost trochu naformátujeme divy. Pro to vytvoříme soubor styles.css:

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

Nezapomeneme jej importovat do App.js:

import './styles.css';

Nyní v samostatném souboru vytvoříme komponentu MiddleBox:

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

A vložíme ji do velké krabice BigBox:

import MiddleBox from './MiddleBox';

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

Provedeme totéž s malou krabičkou SmallBox:

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

Umístíme dvě takové krabičky do MiddleBox:

import SmallBox from './SmallBox';

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

Strom jsme postavili. A nyní chceme z našeho App předat, předpokládejme, do SmallBox řetězcovou hodnotu 'small box :)', a to ne pomocí props, ale pomocí kontextu (což se hodí, pokud naše krabičková aplikace naroste do obrovských rozměrů).

Soubor s kontextem MyContext.js jsme již vytvořili a připojili v minulé lekci.

Další krok, který uděláme - obalíme BigBox v poskytovateli kontextu, který je vlastností našeho objektu kontextu MyContext. Nyní všechny komponenty, uzavřené v této konstrukci (a to jsou všechny krabičky, vnořené do BigBox) budou moci získat přístup a přihlásit se ke změnám kontextu. Jako hodnotu kontextu předáváme požadovanou 'small box :)':

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

A nyní zbývá přečíst hodnotu kontextu. Chtěli jsme ji použít v SmallBox, proto importujeme tam soubor kontextu MyContext.js a hook useContext:

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

Přečteme pomocí useContext hodnotu kontextu do proměnné name:

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

Přihlásili jsme SmallBox k tomuto kontextu a pokud se změní, tato komponenta bude také aktualizována.

A nakonec dosadíme hodnotu proměnné name místo tří teček:

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

V prázdné komponentě App vytvořte komponentu Parent, a v ní komponentu Daughter, a v Daughter komponentu Grandson. Použijte kontext, předejte z App hodnotu věku 42, a pomocí useContext ji vypište v komponentě Daughter.

A nyní v komponentě Grandson vypište hodnotu věku, ale vydělenou 2.