Huku i Kontekstit useContext në React

Në këtë mësim do të vazhdojmë punën me kontekstin. Tani do të ndërtojmë një pemë komponentësh. Për fillim, në një skedar të veçantë krijojmë komponentin React BigBox:

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

Le ta importojmë dhe ta vendosim në komponentin tonë kryesor App:

import BigBox from './BigBox';

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

Për qartësi më të madhe, le t'i stilizojmë pak div-et. Për këtë, krijojmë skedarin styles.css:

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

Të mos harrojmë ta importojmë atë në App.js:

import './styles.css';

Tani, në një skedar të veçantë krijojmë komponentin MiddleBox:

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

Dhe ta vendosim në kutinë e madhe BigBox:

import MiddleBox from './MiddleBox';

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

Le të bëjmë të njëjtën gjë me kutinë e vogël SmallBox:

function SmallBox() {
	return (
		<p>Unë jam ... </p>
	);
}

Le të vendosim dy kuti të tilla në MiddleBox:

import SmallBox from './SmallBox';

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

Pemën e kemi ndërtuar. Tani ne duam që nga App ynë të transmetojmë, sipas supozimit, në SmallBox një vlerë tekstore 'small box :)', pa përdorur props, duke përdorur kontekstin (po sikur aplikacioni ynë i kutive të rritet në përmasa të mëdha).

Skedarin me kontekstin MyContext.js ne e kemi krijuar dhe lidhur tashmë në mësimin e kaluar.

Hapi tjetër që do të bëjmë - do ta mbështjellim BigBox në provider-in e kontekstit, i cili është veti e objektit tonë të kontekstit MyContext. Tani të gjithë komponentët, të mbyllur në këtë konstruksion (dhe këto janë të gjitha kutitë, të vendosura në BigBox) do të mund të marrin qasje dhe të abonohen në ndryshimet e kontekstit. Si vlerë të kontekstit ne transmetojmë atë që dëshirojmë 'small box :)':

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

Dhe tani mbetet vetëm të lexohet vlera e kontekstit. Ne donim ta përdornim atë në SmallBox, pra importojmë aty skedarin e kontekstit MyContext.js dhe hukun useContext:

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

Le të lexojmë me ndihmën e useContext vlerën e kontekstit në variablin name:

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

Ne e kemi abonuar SmallBox në këtë kontekst dhe, nëse ai ndryshon, ky komponent gjithashtu do të përditësohet.

Dhe, së fundi, vendosim vlerën e variablit name në vend të elipsës:

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

Në komponentin bosh App krijoni komponentin Parent, dhe në të komponentin Daughter, dhe në Daughter komponentin Grandson. Duke përdorur kontekstin, transmetoni nga App vlerën e moshës 42, dhe me ndihmën e useContext shfaqeni atë në komponentin Daughter.

Tani në komponentin Grandson shfaqni vlerën e moshës, por të ndarë me 2.