A useContext kontextus hook a React-ben

Ebben a leckében folytatjuk a kontextussal való munkát. Most építünk egy komponensfát. Kezdetként hozzunk létre egy külön fájlban egy React komponenst BigBox néven:

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

Importáljuk és helyezzük el a fő komponensünkben, a App-ben:

import BigBox from './BigBox';

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

A jobb áttekinthetőség érdekében kissé stílusosítsuk a diveket. Ehhez hozzunk létre egy styles.css fájlt:

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

Ne felejtsük el importálni a App.js fájlba:

import './styles.css';

Most hozzunk létre egy külön fájlban egy MiddleBox komponenst:

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

És tegyük a nagy dobozba, a BigBox-ba:

import MiddleBox from './MiddleBox';

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

Ismételjük meg ugyanezt a kis dobozocskával, a SmallBox-val:

function SmallBox() {
	return (
		<p>Én vagyok ... </p>
	);
}

Helyezzünk el két ilyen dobozocskát a MiddleBox-ban:

import SmallBox from './SmallBox';

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

A fát felépítettük. Most pedig azt szeretnénk, hogy a App komponensünk továbbítson, tegyük fel, a SmallBox-nak egy 'kis doboz :)' string értéket, a prop-ok használata nélkül, a kontextust használva (ha esetleg a dobozos alkalmazásunk hatalmasra nőne).

A kontextus fájlját, a MyContext.js-t már létrehoztuk és csatlakoztattuk az előző leckében.

A következő lépés, amit megteszünk - becsomagoljuk a BigBox-t a kontextus provider-be, ami a kontextus objektumunk, a MyContext tulajdonsága. Mostantól minden komponens, ami ebbe a konstrukcióba van zárva (és ez minden BigBox-ba ágyazott dobozocska) hozzáférhet a kontextushoz és feliratkozhat a kontextus változásaira. A kontextus értékeként továbbítjuk a kívánt 'kis doboz :)' értéket:

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

És már csak a kontextus értékét kell elkérnünk. A SmallBox-ban akartuk használni, tehát importáljuk oda a kontextus fájlt, a MyContext.js-t és a useContext hookot:

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

Olvassuk el a useContext segítségével a kontextus értékét a name változóba:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Én vagyok ... </p>
		</div>
	);
}

Feliratkoztattuk a SmallBox-ot erre a kontextusra, és ha az megváltozik, ez a komponens is frissülni fog.

Végül pedig behelyettesítjük a name változó értékét a három pont helyére:

function SmallBox() {
	const name = useContext(MyContext);
	
	return (
		<div>
			<p>Én vagyok {name} </p>
		</div>
	);
}

Egy üres App komponensben hozz létre egy Parent komponenst, abban egy Daughter komponenst, a Daughter-ban pedig egy Grandson komponenst. A kontextust használva juttass el a App-ből egy 42 kor értéket, majd a useContext segítségével jelenítsd meg a Daughter komponensben.

Most pedig a Grandson komponensben jelenítsd meg a kor értékét, de osztva 2-vel.