Mengemaskini Konteks dalam React

Dalam pelajaran ini, kita akan membincangkan pengemaskinian komponen apabila nilai konteks berubah. Katakan anda ingin konteks berubah.

Dalam kes ini, adalah berguna untuk menggunakan konteks bersama-sama dengan keadaan (state). Mari kita ubah suai sedikit aplikasi kotak kami, yang kami buat dalam pelajaran lepas dan buat supaya apabila butang ditekan nilai yang dihantar menjadi 'metal box :)'.

Jadi, ambil fail App kami dan selepas BigBox lukiskan butang:

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

Seterusnya, import hook useState dan wujudkan keadaan (state) name, nilainya akan berubah apabila butang ditekan. Mari kita berikan nilai awal yang sama dengan nilai yang kami terus hantar sebagai nilai konteks, iaitu 'small box :)':

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

Kali ini, kami akan menghantar keadaan (state) name sebagai konteks, bukan rentetan:

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

Sebagai langkah terakhir, kami akan memanggil pengendali klik butang dan menggunakan fungsi setName untuk menetapkan nilai baru keadaan (state) kepada 'metal box :)'. Selepas ini, anda boleh menekan butang dan menyemak hasilnya:

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

Gunakan aplikasi yang dicipta oleh anda apabila menyelesaikan masalah untuk pelajaran sebelumnya. Wujudkan keadaan (state) age, yang akan anda hantar menggunakan konteks daripada App sebagai ganti nombor, tetapkan nilai awalnya kepada 50. Tambahkan butang di bawah komponen Parent dalam App, di mana setiap kali diklik, nilai keadaan (state) age akan berkurang sebanyak 2.