Konteksti uuendamine Reactis

Selles õppetükis vaatleme komponentide uuendamist konteksti väärtuse muutumisel. Oletame, et soovite, et kontekst muutuks.

Sellisel juhul on kasulik rakendada konteksti koos olekute (state) ga. Muudame pisut meie kastikestega rakendust, mida me tegime eelmises õppetükis ja teeme nii, et nupu vajutamisel edastatav väärtus muutuks 'metal box :)'.

Niisiis, võtame meie faili App ja pärast BigBox joonistame nupu:

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

Järgmisena impordime hook'i useState ja loome oleku name, mille väärtust saab muuta nupu vajutamisel. Teeme sellele algväärtuseks selle, mille me kohe andsime konteksti väärtusena, see tähendab 'small box :)':

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

Seekord kanname kontekstiga üle mitte stringi, vaid oleku name:

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

Viimase sammuna kutsumme välja nupu kliki käitleja ja funktsiooni setName abil määrame uue väärtuse olekule väärtusega 'metal box :)'. Pärast seda saab nuppu vajutada ja tulemust kontrollida:

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

Kasutage rakendust, mille te lõite eelmise õppetüki ülesannete lahendamisel. Looge olek age, mida te numbri asemel kannate üle konteksti abil komponendist App, määrake sellele algväärtus 50. Lisage komponendi Parent alla komponendis App nupp, mille iga vajutuse korral oleku age väärtus väheneb 2 võrra.