Kontekstihook useContext Reactis

Selles õppetükis jätkame tööd kontekstiga. Nüüd ehitame komponentide puu. Alustuseks loome eraldi failis Reacti komponendi BigBox:

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

Impordime selle ja asetame oma peamisse komponenti App:

import BigBox from './BigBox';

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

Suurema selguse huvides veidi stiilime div'e. Selleks loome faili styles.css:

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

Ärgem unustagem seda importida App.js:

import './styles.css';

Nüüd loome eraldi failis komponendi MiddleBox:

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

Ja paneme selle suurde kasti BigBox:

import MiddleBox from './MiddleBox';

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

Teeme kõik sama väikese kastiga SmallBox:

function SmallBox() {
	return (
		<p>Ma olen ... </p>
	);
}

Asetame kaks sellist kasti MiddleBox:

import SmallBox from './SmallBox';

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

Puu ehitasime. Ja nüüd me soovime oma App kaudu edastada, oletame, SmallBox stringväärtuse 'small box :)', mitte kasutades propseid, vaid kasutades konteksti (mis siis, kui meie kastirakendus kasvab hiiglaslikeks mõõtmeteks).

Kontekstiga faili MyContext.js me juba lõime ja ühendasime eelmises õppetükis.

Järgmine samm, mille me teeme - mähime BigBox konteksti pakkujasse, mis on meie kontekstiobjekti omadus MyContext. Nüüd kõik komponendid, mis on selle konstruktsiooni sees (ja see on kõik kastid, mis on pesastatud BigBox) saavad juurdepääsu ja tellida konteksti muutustele. Konteksti väärtusena anname soovitud 'small box :)':

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

Ja nüüd jääb üle vaid konteksti väärtuse lugemine. Me tahtsime seda kasutada SmallBox, seega impordime sinna kontekstifaili MyContext.js ja hooki useContext:

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

Loeme useContext abil konteksti väärtuse muutujasse name:

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

Me tellisime SmallBox sellele kontekstile ja kui see muutub, siis see komponent uuendatakse samuti.

Ja lõpetuseks asendame muutuja väärtuse name kolmikpunkti asemel:

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

Tühjas komponendis App looge komponent Parent, ja selles komponent Daughter, ja Daughter komponent Grandson. Kasutades konteksti, edastage App kaudu vanuse väärtus 42, ja kasutades useContext kuvage see komponendis Daughter.

Ja nüüd komponendis Grandson kuvage vanuse väärtus, aga jagatud 2-ga.