Opdatering af kontekst i React

I denne lektion vil vi se på opdatering af komponenter, når kontekstværdien ændres. Antag, at du ønsker, at konteksten skal ændre sig.

I dette tilfælde er det nyttigt at anvende kontekst sammen med tilstande. Lad os en smule ændre vores applikation med kasser, som vi lavede i den forrige lektion og gøre det sådan, at ved at klikke på en knap bliver den overførte værdi 'metal box :)'.

Så, lad os tage vores fil App og efter BigBox tegne en lille knap:

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

Dernæst importerer vi hook'et useState og opretter en tilstand name, hvis værdi vil ændre sig ved et klik på knappen. Lad os give den en startværdi, som vi umiddelbart overførte som kontekstværdi, det vil sige 'small box :)':

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

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

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

Som sidste trin vil vi kalde click-handleren på knappen og ved hjælp af funktionen setName indstille den nye værdi for tilstanden til 'metal box :)'. Efter dette kan du trykke på knappen og kontrollere resultatet:

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

Brug applikationen, som du oprettede ved løsning af opgaverne til den forrige lektion. Opret en tilstand age, som du vil overføre via kontekst i stedet for et tal fra App, indstil dens startværdi til 50. Tilføj under komponenten Parent i App en knap, hvor hvert klik på knappen reducerer værdien af tilstanden age med 2.