Kontextový hook useContext v Reacte

V tejto lekcii budeme pokračovať v práci s kontextom. Teraz vytvoríme strom komponentov. Na začiatok v samostatnom súbore vytvoríme React komponent BigBox:

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

Importujeme ho a umiestnime ho v našom hlavnom komponente App:

import BigBox from './BigBox';

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

Pre väčšiu názornosť trochu naštýlujeme divy. Na to vytvoríme súbor styles.css:

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

Nezabudneme ho importovať do App.js:

import './styles.css';

Teraz v samostatnom súbore vytvoríme komponent MiddleBox:

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

A umiestnime ho do veľkej krabice BigBox:

import MiddleBox from './MiddleBox';

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

Urobíme to isté s malou krabičkou SmallBox:

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

Umiestnime dve takéto krabičky do MiddleBox:

import SmallBox from './SmallBox';

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

Strom sme postavili. A teraz chceme od nášho App odovzdať, predpokladajme, do SmallBox reťazcovú hodnotu 'small box :)', bez použitia propsov, ale pomocou kontextu (čo ak sa naša krabicová aplikácia rozrastie do obrovských rozmerov).

Súbor s kontextom MyContext.js sme už vytvorili a pripojili v predchádzajúcej lekcii.

Ďalší krok, ktorý urobíme - obalíme BigBox do poskytovateľa kontextu, ktorý je vlastnosťou nášho objektu kontextu MyContext. Teraz všetky komponenty uzavreté v tejto konštrukcii (a to sú všetky krabičky vnorené do BigBox) budú mať prístup a budú sa môcť prihlásiť na zmeny kontextu. Ako hodnotu kontextu odovzdávame požadovanú 'small box :)':

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

A teraz už zostáva len prečítať hodnotu kontextu. Chceli sme ho použiť v SmallBox, takže importujeme tam súbor kontextu MyContext.js a hook useContext:

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

Prečítajme si pomocou useContext hodnotu kontextu do premennej name:

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

Prihlásili sme SmallBox na tento kontext a ak sa zmení, tento komponent bude tiež aktualizovaný.

A nakoniec dosadíme hodnotu premennej name namiesto troch bodiek:

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

V prázdnom komponente App vytvorte komponent Parent, a v ňom komponent Daughter, a v Daughter komponent Grandson. Použitím kontextu odovzdajte z App hodnotu veku 42, a pomocou useContext ju vypíšte v komponente Daughter.

A teraz v komponente Grandson vypíšte hodnotu veku, ale vydelenú 2.