React-dä ýagdaýlaryň ýokaryk galdyrylmagy

Köp halatda birnäçe komponentler birmeňzeş üýtgeýän maglumatlary ýüze çykarmalydyr. React-da umumy ýagdaýy iň ýakyn umumy ata degişli edip ýokaryk galdyrmak maslahat berilýär. Mysal üçin göreli.

Diýeli, suw temperaturasyny hasaplaýyjy etmek isleýäris. Ol ulanyjynyň temperaturany girizýän giriş we höküm çykarylýan ýer bolup duran bir abzas hökmünde bolar: suw süýümi, suw gaty, suw gaz.

Hasaplaýyjymyz Calculator atly konteýner komponenti hökmünde bolsun:

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

Temperaturany girizmek üçin girişi TempInp komponentine, höküm bilen abzasy bolsa Verdict komponentine geçireli:

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

Hem TempInp, hem Verdict komponentleriniň temperaturaly ýagdaýa eýe bolmalydygyny aňsat düşünmek bolýar. Şeýle hem, bu birmeňzeş temperatura bolmalydygy mätäç: girişe maglumat girizilýänçä, höküm görkezmeli.

Şeýle bir ýagdaýda ýagdaýy ýokaryk galdyrmak diýilýän usuly ulanmak maslahat berilýär: iki (ýa-da köpräk) komponent üçin umumy bolan ýagdaý, olaryň umumy ata degişli edilip ýokaryk galdyrylýar.

Bizim ýagdaýymyzda, temperaturaly ýagdaý Calculator komponentine degişli bolup, ol ony TempInp we Verdict komponentlerine prop hökmünde geçirer:

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

TempInp komponentinde temperaturany üýtgetmek üçin giriş bolmaly. Emma, bu temperatura bu komponentiň propsy bolany üçin, derrew TempInp komponentinde ony üýtgetmek bolmaýar. Temperaturany üýtgetmek üçin Calculator komponentinden ýörite funksiýany geçirmek dogry bolar:

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

Äşgär, täze funksiýa girizmezden, çaga komponentine setTemp funksiýasyny hem geçirmek bolýar:

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

TempInp we Verdict komponentleriniň ýerine ýetirilişini ýazyň.

Ýagdaýy ýokaryk galdyrmagy ulanmaly bolan 3 meseläni oýlanyň. Bu meseläniň çözgütlerini ýazyň.