Контекст hook useContext во React

Во оваа лекција ќе продолжиме со работа со контекстот. Сега ќе изградиме дрво на компоненти. За почеток во одделна датотека ќе креираме React компонента BigBox:

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

Ќе ја импортираме и ќе ја сместиме во нашата главна компонента App:

import BigBox from './BigBox';

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

За поголема јасност малку стилизирајме ги дивињата. За ова ќе креираме датотека styles.css:

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

Не забораваме да ја импортираме во App.js:

import './styles.css';

Сега во одделна датотека ќе креираме компонента MiddleBox:

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

И ќе ја ставиме во големата кутија BigBox:

import MiddleBox from './MiddleBox';

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

Ќе го направиме истото и со малата кутичка SmallBox:

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

Ќе поставиме две вакви кутички во MiddleBox:

import SmallBox from './SmallBox';

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

Дрвото го изградивме. А сега ние сакаме од нашиот App да пренесеме, да речеме, во SmallBox стринговска вредност 'small box :)', без користење на пропси, туку користејќи контекст (во случај нашата кутија апликација да порасне до огромни димензии).

Датотеката со контекст MyContext.js веќе ја создадовме и ја поврзавме во претходната лекција.

Следниот чекор што ќе го направиме - ќе го обвиеме BigBox во провајдер на контекст, кој е својство на нашиот објект на контекст MyContext. Сега сите компоненти, вклучени во оваа конструкција (а тоа се и сите кутији, вгнездени во BigBox) ќе можат да добијат пристап и да се претплатат на промените во контекстот. Како вредност на контекстот ја пренесуваме саканата 'small box :)':

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

А сега остана само да ја прочитаме вредноста на контекстот. Сакавме да го искористиме во SmallBox, значи ќе ја импортираме таму датотеката за контекст MyContext.js и hook-от useContext:

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

Ќе прочитаме со помош на useContext вредноста на контекстот во променливата name:

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

Ја претплативме SmallBox на овој контекст и, ако се промени, оваа компонента исто така ќе се ажурира.

И, конечно, ја ставаме вредноста на променливата name на местото на многоточието:

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

Во празната компонента App креирајте компонента Parent, а во неа компонента Daughter, а во Daughter компонента Grandson. Користејќи контекст, пренесете од App вредност на возраст 42, а со помош на useContext прикажете ја во компонентата Daughter.

А сега во компонентата Grandson прикажете ја вредноста на возрастот, но поделена со 2.