React-də State-in Yuxarı Qaldırılması

Tez-tez bir neçə komponent eyni dəyişən məlumatları əks etdirməlidir. React-də ümumi state-i ən yaxın ümumi ata qədər qaldırmaq tövsiyə olunur. Gəlin bir nümunəyə baxaq.

Tutaq ki, biz suyun temperatur kalkulyatoru etmək istəyirik. O, istifadəçinin temperaturu daxil edəcəyi bir input və hökmün çap olunacağı bir abzas təşkil edəcək: su mayedir, su bərkdir, su qazformalıdır.

Fərz edək ki, bizim kalkulyator Calculator konteyner komponentidir:

function Calculator() {
	return <div>
		
	</div>;
}

Gəlin temperaturun daxil edilməsi üçün inputu TempInp komponentinə, hökm abzasını isə Verdict komponentinə çıxaraq:

function Calculator() {
	return <div>
		<Verdict />
		<TempInp />
	</div>;
}

Başa düşmək asandır ki, həm TempInp, həm də Verdict temperatur ilə state-ə malik olmalıdır. Eyni zamanda məntiqlidir ki, bu eyni temperatur olmalıdır: inputa məlumat daxil edildikcə hökm görünməlidir.

Belə bir halda state-in yuxarı qaldırılması adlanan qəbuldan istifadə etmək tövsiyə olunur: iki (və ya daha çox) komponent üçün ortaq olan state onların ortaq valideyninə qədər yuxarı qaldırılır.

Bizim vəziyyətimizdə belə çıxır ki, temperaturla state Calculator komponentinə məxsus olmalıdır, o da onu TempInp və Verdict komponentlərinə props kimi ötürəcək:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} />
	</div>;
}

TempInp komponentində temperaturu dəyişmək üçün input olmalıdır. Lakin, bu temperatur bu komponentin propsu olduğundan, birbaşa TempInp komponentində onu dəyişmək olmaz. Düzgün olan, Calculator komponentindən temperaturu dəyişmək üçün xüsusi bir funksiyanı ötürməkdir:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	function changeTemp(event) {
		setTemp(event.target.value);
	}
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} changeTemp={changeTemp} />
	</div>;
}

Yeri gəlmişkən, yeni funksiya təqdim etmək lazım deyil, övlad komponentə setTemp funksiyasını ötürmək olar:

function Calculator() {
	const [temp, setTemp] = useState(0);
	
	return <div>
		<Verdict temp={temp} />
		<TempInp temp={temp} setTemp={setTemp} />
	</div>;
}

TempInp və Verdict komponentlərinin reallaşdırılmasını yazın.

State-in yuxarı qaldırılmasının istifadə edilməli olduğu 3 məsələ tapın. Bu məsələlərin həllərini yazın.