Контекстуален хук 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>Аз съм ... </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>Аз съм ... </p>
		</div>
	);
}

Ние абонирахме SmallBox за този контекст и, ако той се промени, този компонент също ще бъде обновен.

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

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Аз съм {name} </p>
		</div>
	);
}

В празния компонент App създайте компонент Parent, а в него компонент Daughter, а в Daughter компонент Grandson. Използвайки контекст, предайте от App стойността на възрастта 42, а с помощта на useContext я изведете в компонента Daughter.

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