Oppdatering av kontekst i React

I denne leksjonen skal vi se på oppdatering av komponenter når kontekstverdien endres. Anta at du ønsker at konteksten skal endres.

I dette tilfellet er det nyttig å bruke kontekst sammen med tilstander. La oss endre applikasjonen vår med esker litt, som vi laget i forrige leksjon, og gjøre det slik at ved å klikke på en knapp blir den overførte verdien 'metal box :)'.

Så, la oss ta filen App og etter BigBox tegne en liten knapp:

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

Deretter importerer vi hooken useState og oppretter en tilstand name, hvis verdi vil endres ved klikk på knappen. La oss gi den en startverdi som vi umiddelbart overførte som kontekstverdi, det vil si 'small box :)':

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

Denne gangen vil vi overføre ikke en streng, men tilstanden name som kontekst:

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

Som siste trinn vil vi kalle en klikkhåndterer for knappen og ved hjelp av funksjonen setName sette en ny verdi for tilstanden til 'metal box :)'. Etter dette kan du trykke på knappen og sjekke resultatet:

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

Bruk applikasjonen du opprettet ved løsning av oppgaver til forrige leksjon. Opprett en tilstand age, som du vil overføre ved hjelp av kontekst fra App i stedet for et tall, sett startverdien til 50. Legg til under komponenten Parent i App en knapp, hvor hvert klikk på den vil redusere verdien av tilstanden age med 2.