Posodabljanje konteksta v Reactu

V tej lekciji bomo preučili posodabljanje komponent ob spremembi vrednosti konteksta. Recimo, da boste želeli, da se kontekst spreminja.

V tem primeru je koristno uporabiti kontekst v povezavi s stanji. Malo spremenimo našo aplikacijo s škatlami, ki smo jo izdelali v prejšnji lekciji, in naredimo tako, da se ob kliku na gumb posredovana vrednost spremeni v 'metal box :)'.

Torej, vzemimo našo datoteko App in po BigBox narišimo gumb:

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

Nato uvozimo kavelj useState in ustvarimo stanje name, katerega vrednost se bo spreminjala ob kliku na gumb. Nastavimo mu začetno vrednost tisto, ki smo jo takoj posredovali kot vrednost konteksta, torej 'small box :)':

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

Tokrat bomo s kontekstom posredovali ne niz, ampak stanje name:

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

Kot zadnji korak bomo poklicali obravnavalnik klika na gumb in s pomočjo funkcije setName nastavili novo vrednost stanja na 'metal box :)'. Po tem lahko kliknemo na gumb in preverimo rezultat:

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

Uporabite aplikacijo, ki ste jo ustvarili pri reševanju nalog za prejšnjo lekcijo. Ustvarite stanje age, ki ga boste namesto števila posredovali s pomočjo konteksta iz App, nastavite mu začetno vrednost 50. Dodajte pod komponento Parent v App gumb, ob vsakem kliku na katerega se vrednost stanja age zmanjša za 2.