Kontext-Update in React

In dieser Lektion betrachten wir die Aktualisierung von Komponenten bei einer Änderung des Kontextwerts. Nehmen wir an, Sie möchten, dass sich der Kontext ändert.

In diesem Fall ist es nützlich, den Kontext in Verbindung mit States anzuwenden. Lassen Sie uns unsere Anwendung mit den Kästchen, die wir in der letzten Lektion erstellt haben, ein wenig ändern und es so einrichten, dass beim Klicken auf einen Button der übergebene Wert zu 'metal box :)' wird.

Also, nehmen wir unsere Datei App und zeichnen nach dem BigBox einen Button:

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

Als nächstes importieren wir den Hook useState und legen einen State name an, dessen Wert sich beim Klicken des Buttons ändern wird. Wir setzen seinen Startwert auf den, den wir sofort als Kontextwert übergeben haben, also 'small box :)':

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

Dieses Mal werden wir mit dem Kontext nicht einen String, sondern den State name übergeben:

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

Als letzten Schritt werden wir einen Click-Handler für den Button aufrufen und mit der Funktion setName einen neuen Wert für den State auf 'metal box :)' setzen. Danach kann der Button geklickt und das Ergebnis überprüft werden:

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

Verwenden Sie die Anwendung, die Sie beim Lösen der Aufgaben aus der vorherigen Lektion erstellt haben. Legen Sie einen State age an, den Sie anstelle der Zahl mit Hilfe des Kontexts aus App übergeben werden. Setzen Sie seinen Anfangswert auf 50. Fügen Sie unter der Komponente Parent in App einen Button hinzu, bei jedem Klick auf den der Wert des States age um 2 verringert wird.