Konteksti React-də yeniləmək

Bu dərsdə konteksin dəyəri dəyişdikdə komponentlərin yenilənməsini nəzərdən keçirəcəyik. Tutaq ki, konteksin dəyişməsini istəyirsiniz.

Bu halda konteksdən vəziyyətlərlə birlikdə istifadə etmək faydalıdır. Gəlin əvvəlki dərsdə etdiyimiz qutucuqlarla tətbiqimizi bir az dəyişək və düyməyə kliklədikdə ötürülən dəyərin 'metal box :)' olmasını təmin edək.

Beləliklə, App faylımızı götürək və BigBox-dan sonra kiçik bir düymə əlavə edək:

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

Sonra, useState çəngəlini idxal edək və düyməyə kliklədikdə dəyişəcək name vəziyyətini təyin edək. Ona ilkin dəyər olaraq dərhal konteksin dəyəri kimi ötürdüyümüz, yəni 'small box :)' olan dəyəri təyin edək:

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

Bu dəfə konteks vasitəsilə sətir deyil, name vəziyyətini ötürəcəyik:

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

Son addım olaraq, düyməyə kliklədikdə işləyəcək qəbuledici təyin edəcəyik və setName funksiyası vasitəsilə vəziyyətin yeni dəyərini 'metal box :)' olaraq təyin edəcəyik. Bundan sonra düyməyə klikləyib nəticəni yoxlaya bilərsiniz:

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

Əvvəlki dərs üçün tapşırıqları həll edərkən yaratdığınız tətbiqdən istifadə edin. Konteks vasitəsilə App-dan rəqəm əvəzinə ötürəcəyiniz age vəziyyətini təyin edin, ona ilkin dəyər kimi 50 təyin edin. App-da Parent komponentindən sonra hər klikdə age veziyyətinin dəyərini 2 azaldan bir düymə əlavə edin.