Konteksta atjaunināšana React

Šajā nodarbībā mēs apskatīsim komponentu atjaunināšanu, kad mainās konteksta vērtība. Pieņemsim, ka jūs vēlēsities, lai konteksts mainītos.

Šajā gadījumā ir lietderīgi izmantot kontekstu kopā ar stāvokļiem. Nedaudz mainīsim mūsu lietotni ar kastiņām, ko mēs veidojām iepriekšējā nodarbībā, un padarīsim tā, lai, noklikšķinot uz pogas, nodotā vērtība kļūtu par 'metal box :)'.

Tātad, paņemsim mūsu failu App un pēc BigBox uzzīmēsim pogu:

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

Tālāk importēsim āķi useState un izveidosim stāvokli name, kura vērtība tiks mainīta, noklikšķinot uz pogas. Dosim tam sākotnējo vērtību, ko mēs uzreiz nodoja kā konteksta vērtību, tas ir, 'small box :)':

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

Šoreiz kontekstā mēs nodosim nevis virkni, bet stāvokli name:

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

Kā pēdējo soli mēs izsauksim klikšķa apstrādātāju uz pogas un ar funkcijas setName palīdzību iestatīsim jauno vērtību stāvoklim uz 'metal box :)'. Pēc tam varēs nospiest uz pogas un pārbaudīt rezultātu:

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

Izmantojiet lietotni, ko izveidojāt risinot iepriekšējās nodarbības uzdevumus. Izveidojiet stāvokli age, kuru jūs skaitļa vietā nodosiet, izmantojot kontekstu, no App, iestatiet tam sākotnējo vērtību 50. Pievienojiet zem komponenta Parent failā App pogu, ar katru klikšķi uz kuras stāvokļa vērtība age samazināsies par 2.