Konteks Opdatering in React

In hierdie les sal ons die opdatering van komponente oorweeg wanneer die kontekswaarde verander. Veronderstel jy wil hê dat die konteks moet verander.

In hierdie geval is dit nuttig om konteks in kombinasie met state te gebruik. Kom ons verander ons boksie-aansoek wat ons gedoen het in die vorige les 'n bietjie en maak dit so dat wanneer op 'n knoppie gedruk word, die oorgedrawe waarde 'metal box :)' word.

So, kom ons neem ons lêer App en teken 'n knoppie na BigBox:

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

Volgende, laat ons die hook useState invoer en 'n state name skep, waarvan die waarde sal verander wanneer op die knoppie gedruk word. Kom ons gee dit 'n aanvanklike waarde wat ons dadelik as kontekswaarde oorgedra het, dit is 'small box :)':

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

Hierdie keer sal ons nie 'n string as konteks oordra nie, maar die state name:

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

As laaste stap sal ons 'n knoppieklick-handler aanroep en met behulp van die funksie setName die nuwe waarde van die state opstel na 'metal box :)'. Daarna kan jy op die knoppie druk en die resultaat toets:

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

Gebruik die aansoek wat jy geskep het tydens die oplossing van take vir die vorige les. Skep 'n state age wat jy in plaas van die getal deur middel van konteks sal oordra vanuit App, stel sy aanvanklike waarde op 50. Voeg onder die komponent Parent in App 'n knoppie by, met elke klik waarop die waarde van die state age met 2 sal verminder.