Konteksto hukas useContext React'e

Šioje pamokoje mes tęsime darbą su kontekstu. Dabar sukursime komponentų medį. Pirmiausia atskirame faile sukursime React komponentą BigBox:

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

Importuokime jį ir patalpinkime savo pagrindiniame komponente App:

import BigBox from './BigBox';

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

Kad būtų aiškiau, šiek tiek stilizuokime div'us. Tam sukurkime failą styles.css:

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

Nepamirškime jį importuoti į App.js:

import './styles.css';

Dabar atskirame faile sukurkime komponentą MiddleBox:

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

Ir padėkime jį į didelę dėžutę BigBox:

import MiddleBox from './MiddleBox';

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

Padarykime tą patį su maža dėžute SmallBox:

function SmallBox() {
	return (
		<p>Aš esu ... </p>
	);
}

Patalpinkime dvi tokias dėžutes į MiddleBox:

import SmallBox from './SmallBox';

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

Medį mes pastatėme. O dabar mes norime iš mūsų App perduoti, tarkime, į SmallBox eilutės reikšmę 'small box :)', ne naudojant props'ų, o naudojantis kontekstu (staiga mūsų dėžutė programa išaugs iki didelių matmenų).

Failą su kontekstu MyContext.js mes jau sukūrėme ir prijungėme praeitoje pamokoje.

Kitas žingsnis, kurį atliksime - apgaubsime BigBox konteksto provider'iu, kuris yra mūsų konteksto objekto savybė MyContext. Dabar visi komponentai, įtraukti į šią konstrukciją (o tai ir visos dėžutės, įdėtos į BigBox) galės gauti prieigą ir prenumeruoti konteksto pakeitimus. Kaip konteksto reikšmę mes perduodame norimą 'small box :)':

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

O dabar belieka perskaityti konteksto reikšmę. Mes norėjome jį naudoti SmallBox, vadinasi importuokime ten konteksto failą MyContext.js ir huką useContext:

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

Perskaitykime naudodami useContext konteksto reikšmę į kintamąjį name:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Aš esu ... </p>
		</div>
	);
}

Mes prenumeravome SmallBox šiam kontekstui ir, jei jis pasikeis, šis komponentas taip pat bus atnaujintas.

Ir, galiausiai, pakeičiame kintamojo name reikšmę vietoje daugtaškio:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Aš esu {name} </p>
		</div>
	);
}

Tuščiame komponente App sukurkite komponentą Parent, o jame komponentą Daughter, o Daughter komponentą Grandson. Naudodami kontekstą, perduokite iš App amžiaus reikšmę 42, o naudodami useContext atspausdinkite ją komponente Daughter.

O dabar komponente Grandson atspausdinkite amžiaus reikšmę, bet padalintą iš 2.