Konteksto atnaujinimas React

Šioje pamokoje apžvelgsime komponentų atnaujinimą keičiantis konteksto reikšmei. Tarkime, norėtumėte, kad kontekstas keistųsi.

Šiuo atveju naudinga naudoti kontekstą kartu su būsenomis. Šiek tiek pakeiskime mūsų dėžučių programėlę, kurią kūrėme praėjusioje pamokoje, ir padarykime taip, kad paspaudus mygtuką perduodama reikšmė taptų 'metal box :)'.

Taigi, paimkime mūsų failą App ir po BigBox nupieškime mygtuką:

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

Toliau importuokime hook'ą useState ir sukurkime būseną name, kurios reikšmė bus keičiama paspaudus mygtuką. Nustatykime jai pradinę reikšmę, kurią iš karto perdavėme konteksto reikšme, tai yra 'small box :)':

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

Šį kartą kontekstu perduosime ne eilutę, o būseną name:

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

Paskutiniu žingsniu iškviesime klikų apdorojimo funkciją mygtuke ir naudodami funkciją setName nustatysime naują reikšmę būsenai į 'metal box :)'. Po to galėsite paspausti ant mygtuko ir patikrinti rezultatą:

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

Naudokitės programėle, kurią sukūrėte sprendžiant uždavinius ankstesnei pamokai. Sukurkite būseną age, kurią vietoj skaičiaus perduosite naudodami kontekstą iš App, nustatykite jai pradinę reikšmę 50. Po komponentu Parent App pridėkite mygtuką, kurį kaskart paspaudus būsenos reikšmė age sumažėtų 2.