Kontekstihook useContext Reactissa

Tässä oppitunnissa jatkamme kontekstin parissa. Nyt rakennamme komponenttipuun. Aluksi luomme erillisessä tiedostossa React-komponentin BigBox:

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

Tuomme sen ja sijoittamme sen pääkomponenttiimme App:

import BigBox from './BigBox';

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

Selvyyden vuoksi tyylitellään div-elementtejä hieman. Luomme tätä varten tiedoston styles.css:

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

Emme unohda tuoda sitä App.js:ään:

import './styles.css';

Nyt luomme erillisessä tiedostossa komponentin MiddleBox:

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

Ja laitamme sen isoon laatikkoon BigBox:

import MiddleBox from './MiddleBox';

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

Teemme saman pienen laatikon SmallBox kanssa:

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

Sijoittamme kaksi tällaista laatikkoa MiddleBox:iin:

import SmallBox from './SmallBox';

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

Rakensimme puun. Ja nyt haluamme App:ltamme välittää, oletetaan, SmallBox:iin merkkijonon 'small box :)', käyttämättä proppeja, vaan hyödyntäen kontekstia (joskin laatikkosovelluksemme kasvaisi valtavaksi).

Kontekstitiedoston MyContext.js loimme ja yhdistimme edellisellä oppitunnilla.

Seuraava askel, jonka teemme - käärimme BigBox:in kontekstin tarjoajaan, joka on kontekstioliomme MyContext ominaisuus. Nyt kaikki tähän rakenteeseen suljetut komponentit (ja kaikki BigBox:iin sisäkkäin sijoitetut laatikot) voivat saada pääsyn ja tilata kontekstin muutoksiin. Kontekstin arvona välitämme toivotun 'small box :)':

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

Ja nyt on vain luettava kontekstin arvo. Halusimme käyttää sitä SmallBox:ssa, joten tuomme sinne kontekstitiedoston MyContext.js ja hookin useContext:

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

Luemme useContext:n avulla kontekstin arvon muuttujaan name:

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

Tilasimme SmallBox:in tälle kontekstille ja, jos se muuttuu, tämä komponentti päivittyy myös.

Ja lopuksi, sijoittamme muuttujan name arvon ellipsin tilalle:

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

Tyhjässä komponentissa App luo komponentti Parent, ja siinä komponentti Daughter, ja Daughter:ssa komponentti Grandson. Käyttäen kontekstia, välitä App:sta ikäarvon 42, ja käyttäen useContext:ä näytä se komponentissa Daughter.

Ja nyt komponentissa Grandson näytä ikäarvo, jaettuna 2:lla.