A kontextus frissítése Reactben

Ebben a leckében a komponensek frissítését vizsgáljuk a kontextus értékének változásakor. Tegyük fel, hogy azt szeretné, ha a kontextus változna.

Ebben az esetben hasznos a kontextust állapotokkal együtt alkalmazni. Változtassuk meg egy kicsit a dobozokkal foglalkozó alkalmazásunkat, amelyet az előző leckében készítettünk, és tegyük úgy, hogy egy gomb megnyomására az átadott érték 'metal box :)' legyen.

Tehát vegyük a App fájlunkat, és a BigBox után rajzoljunk egy gombot:

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

Ezután importáljuk a useState hookot, és hozzunk létre egy name állapotot, amelynek értéke a gomb megnyomásakor változik. Adjunk neki kezdeti értékként azt, amit azonnal átadtunk a kontextus értékeként, azaz 'small box :)':

function App() {
	const [name, setName] = useState('small box :)');
}

Ezúttal a kontextussal nem egy sztringet, hanem a name állapotot adjuk át:

<MyContext.Provider value={name}>
	<BigBox />
	<button>click</button>
</MyContext.Provider>

Utolsó lépésként meghívjuk a gombra kattintás kezelőjét, és a setName függvény segítségével beállítjuk az új értéket az állapotnak 'metal box :)' értékre. Ezután megnyomhatjuk a gombot és ellenőrizhetjük az eredményt:

<button onClick={() => {
	setName('metal box :)');
}}>click</button>

Használd az előző lecke feladatainak megoldásakor létrehozott alkalmazásodat. Hozz létre egy age állapotot, amelyet szám helyett a kontextus segítségével adsz át a App-ből, állítsd be a kezdeti értékét 50-re. Add hozzá a Parent komponens alá a App-ben egy gombot, amelyre minden kattintáskor a age állapot értéke 2-vel csökken.