Kontekstni kliuček useContext v Reactu

V tej lekciji bomo nadaljevali z delom s kontekstom. Zdaj bomo zgradili drevo komponent. Za začetek v ločeni datoteki ustvarimo React komponento BigBox:

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

Uvozimo jo in namestimo v našo glavno komponento App:

import BigBox from './BigBox';

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

Za večjo preglednost malo oblikujmo div-e. Za to ustvarimo datoteko styles.css:

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

Ne pozabimo je uvoziti v App.js:

import './styles.css';

Zdaj v ločeni datoteki ustvarimo komponento MiddleBox:

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

In jo postavimo v veliko škatlo BigBox:

import MiddleBox from './MiddleBox';

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

Enako naredimo z majhno škatlico SmallBox:

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

Postavimo dve takšni škatlici v MiddleBox:

import SmallBox from './SmallBox';

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

Drevo smo zgradili. Zdaj pa želimo iz našega App posredovati, recimo, v SmallBox nizno vrednost 'small box :)', ne z uporabo props-ov, temveč z uporabo konteksta (skozi celotno strukturo komponent).

Datoteko s kontekstom MyContext.js smo že ustvarili in povezali v prejšnji lekciji.

Naslednji korak, ki ga bomo naredili - ovijemo BigBox v ponudnika konteksta, ki je lastnost našega objekta konteksta MyContext. Zdaj lahko vse komponente, zaprte v to konstrukcijo (in to so vse škatle, vložene v BigBox) dostopajo in se naročijo na spremembe konteksta. Kot vrednost konteksta posredujemo želeno 'small box :)':

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

In zdaj je še treba prebrati vrednost konteksta. Želeli smo ga uporabiti v SmallBox, kar pomeni, da uvozimo tja datoteko konteksta MyContext.js in kliuček useContext:

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

Z useContext preberimo vrednost konteksta v spremenljivko name:

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

Prijavili smo SmallBox na ta kontekst in če se bo spremenil, bo ta komponenta prav tako posodobljena.

In končno, vrednost spremenljivke name postavimo namesto tripičja:

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

V prazni komponenti App ustvarite komponento Parent, v njej komponento Daughter, v Daughter pa komponento Grandson. Z uporabo konteksta posredujete iz App vrednost starosti 42, s pomočjo useContext pa jo izpišite v komponenti Daughter.

In zdaj v komponenti Grandson izpišite vrednost starosti, vendar deljeno z 2.