Konteksta hūks useContext React

Šajā nodarbībā mēs turpināsim darbu ar kontekstu. Tagad izveidosim komponentu koku. Sākumā atsevišķā failā izveidosim React komponentu BigBox:

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

Importēsim to un ievietosim mūsu galvenajā komponentā App:

import BigBox from './BigBox';

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

Lai padarītu vizuāli saprotamāku, nedaudz stilizēsim divus. Lai to izdarītu, izveidosim failu styles.css:

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

Neaizmirsīsim to importēt App.js:

import './styles.css';

Tagad atsevišķā failā izveidosim komponentu MiddleBox:

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

Un ievietosim to lielajā kastē BigBox:

import MiddleBox from './MiddleBox';

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

Izdarīsim to pašu ar mazo kastiņu SmallBox:

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

Ievietosim divas šādas kastiņas MiddleBox:

import SmallBox from './SmallBox';

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

Koku mēs esam izveidojuši. Un tagad mēs vēlamies no mūsu App nodot, pieņemsim, uz SmallBox virknes vērtību 'small box :)', ne izmantojot props, bet izmantojot kontekstu (ja nu mūsu kastīšu lietotne izaugs līdz milzīgiem izmēriem).

Failu ar kontekstu MyContext.js mēs jau izveidojām un pievienojām iepriekšējā nodarbībā.

Nākamais solis, ko mēs veiksim - ietīsim BigBox konteksta providerī, kas ir mūsu konteksta objekta īpašība MyContext. Tagad visi komponenti, kas atrodas šajā konstrukcijā (un tas ir arī visas kastes, kas ietilpst BigBox) varēs piekļūt un pierakstīties uz konteksta izmaiņām. Kā konteksta vērtību mēs nododam vēlamo 'small box :)':

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

Un tagad atliek tikai nolasīt konteksta vērtību. Mēs gribējām to izmantot SmallBox, tāpēc importēsim tur konteksta failu MyContext.js un hūku useContext:

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

Izlasīsim ar useContext konteksta vērtību mainīgajā name:

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

Mēs esam pierakstījuši SmallBox uz šo kontekstu un, ja tas mainīsies, šis komponents tiks atjaunināts.

Un, beidzot, ievietojam mainīgā name vērtību daudzpunktes vietā:

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

Tukšajā komponentā App izveidojiet komponentu Parent, un tajā komponentu Daughter, un Daughter komponentu Grandson. Izmantojot kontekstu, nododiet no App vecuma vērtību 42, un ar useContext izvadiet to komponentā Daughter.

Un tagad komponentā Grandson izvadiet vecuma vērtību, bet dalītu ar 2.