Контекстуални хук 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 и хук 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.