Përditësimi i Kontekstit në React

Në këtë mësim do të shqyrtojmë përditësimin e komponentëve kur ndryshon vlera e kontekstit. Supozoni se dëshironi që konteksti të ndryshojë.

Në këtë rast është e dobishme të përdorni kontekstin në lidhje me state. Le të modifikojmë pak aplikacionin tonë me kutitë, që kemi bërë në mësimin e kaluar dhe të bëjmë që me klikimin e një butoni vlera e transmetuar të bëhet 'metal box :)'.

Pra, le të marrim skedarin tonë App dhe pas BigBox të vizatojmë një buton:

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

Më pas le të importojmë hook-un useState dhe të krijojmë state name, vlera e të cilit do të ndryshojë me klikimin e butonit. Le t'i japim vlerë fillimare atë që menjëherë e kaluam si vlerë konteksti, domethënë 'small box :)':

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

Këtë herë përmes kontekstit do të transmetojmë jo një varg, por state-in name:

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

Si hap i fundit ne do të thirrim përpunuesin e klikimit të butonit dhe me ndihmën e funksionit setName do të vendosim vlerën e re të state-it në 'metal box :)'. Pas kësaj mund të klikoni në buton dhe të kontrolloni rezultatin:

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

Përdorni aplikacionin e krijuar nga ju gjatë zgjidhjes së detyrave për mësimin e kaluar. Krijoni një state age, të cilin do ta kaloni në vend të numrit përmes kontekstit nga App, vendosni atij vlerë fillestare 50. Shtoni nën komponentin Parent në App një buton, ku me çdo klikim mbi të vlera e state-it age do të ulet me 2.