Hook-ul de context useContext în React

În această lecție vom continua lucrul cu contextul. Acum vom construi un arbore de componente. Pentru început, într-un fișier separat vom crea componenta React BigBox:

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

Să o importăm și să o plasăm în componenta noastră principală App:

import BigBox from './BigBox';

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

Pentru o mai bună vizualizare, să stilizăm puțin div-urile. Pentru aceasta, să creăm fișierul styles.css:

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

Să nu uităm să-l importăm în App.js:

import './styles.css';

Acum, într-un fișier separat, să creăm componenta MiddleBox:

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

Și să o plasăm în cutia mare BigBox:

import MiddleBox from './MiddleBox';

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

Să facem același lucru cu cutia mică SmallBox:

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

Să plasăm două astfel de cutii în MiddleBox:

import SmallBox from './SmallBox';

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

Am construit arborele. Și acum noi vrem să transmitem de la App, să zicem, în SmallBox o valoare șir 'small box :)', fără a folosi props-uri, ci folosind contextul (dacă brusc aplicația noastră de cutii se va extinde la dimensiuni uriașe).

Fișierul cu contextul MyContext.js l-am creat și conectat deja în lecția anterioară.

Următorul pas pe care îl vom face - vom împacheta BigBox în furnizorul de context, care este o proprietate a obiectului nostru de context MyContext. Acum toate componentele, incluse în această construcție (și toate cutiile, incluse în BigBox) vor putea accesa și se vor putea abona la modificările contextului. Ca valoare a contextului transmitem șirul dorit 'small box :)':

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

Și acum rămâne să citim valoarea contextului. Voiam să o folosim în SmallBox, deci să importăm acolo fișierul de context MyContext.js și hook-ul useContext:

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

Să citim cu ajutorul useContext valoarea contextului în variabila name:

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

Am abonat SmallBox la acest context și, dacă acesta se va modifica, această componentă va fi de asemenea actualizată.

Și, în final, substituim valoarea variabilei name în loc de puncte:

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

În componenta goală App creați componenta Parent, iar în ea componenta Daughter, iar în Daughter componenta Grandson. Folosind contextul, transmiteți din App valoarea vârstei 42, iar cu ajutorul useContext afișați-o în componenta Daughter.

Și acum în componenta Grandson afișați valoarea vârstei, dar împărțită la 2.