Хук кантэксту 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.