Дар React холҳои давлатӣ ба боло бардоштан

Аксар вақт чанд компонент бояд ҳамон маълумоти тағйирёбандаро акс кунанд. Дар React тавсия дода мешавад, ки ҳолати умумӣ то ба наздиктарин падар олии муштарак ба боло бардошта шавад. Биёед дар мисол назар кунем.

Фарз мекунем, ки мо мехоҳем ҳисобкунаки ҳарорати об созем. Он инпутеро ташкил медиҳад, ки корбар ба он ҳароратро дохил мекунад, ва параграферо, ки дар он ҳукм чоп мешавад: об моеъ, об сахт, об газмонанд.

Фарз мекунем, ки ҳисобкунаки мо контейнери компонент Calculator мебошад:

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

Инпути воридкунии ҳароратро ба компоненти TempInp берун кунем, ва параграфи ҳукмро - ба компоненти Verdict:

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

Ба осонӣ фаҳмида мешавад, ки ҳам TempInp, ҳам Verdict бояд ҳолати ҳароратро дошта бошанд. Дар ин ҳол, мантиқан, ки ин бояд як ҳамин ҳарорат бошад: ҳангоми ворид кардани маълумот ба инпут бояд ҳукм намоиш дода шавад.

Дар чунин ҳолат тавсия дода мешавад, ки усули номӣ бардоштани холҳои давлатӣ истифода шавад: ҳолати, ки барои ду (ва зиёда) компонентҳо муштарак аст, то ба падари умумӣ ба боло бардошта мешавад.

Дар ҳолати мо, ҳолати ҳарорат ба компоненти Calculator тааллуқ дорад, ки онро ба TempInp ва Verdict ҳамчун пропс мефиристад:

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

Дар компоненти TempInp бояд инпут барои тағйир додани ҳарорат бошад. Вале, аз он ҷое ки ин ҳарорат пропси ин компонент мебошад, пас мустақиман дар TempInp тағйир додани он ҷоиз нест. Дуруст хоҳад буд, ки аз компоненти Calculator функсияи махсус барои тағйир додани ҳарорат фиристода шавад:

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>;
}

Гуфтан мумкин аст, ки функсияи нав ворид кардан лозим нест, балеки ба компоненти фарзандӣ функсияи setTemp фиристода шавад:

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

Таҳияи компонентҳои TempInp ва Verdict-ро нависед.

3 масоилеро тасаввур кунед, ки дар онҳо бояд бардоштани холҳои давлатӣ истифода шавад. Ҳалли ин масъалаҳоро нависед.