სახელმწიფოების აწევა React-ში

ხშირად რამდენიმე კომპონენტმა უნდა ასახოს იგივე მცველდომილი მონაცემები. React-ში რეკომენდებულია საერთო სახელმწიფოს აწევა უახლოეს საერთო წინაპარამდე. მოდით შევხედოთ მაგალითს.

დავუშვათ, ჩვენ გვინდა გავაკეთოთ წყლის ტემპერატურის კალკულატორი. ის წარმოადგენს input ველს, რომელშიც მომხმარებელი შეიყვანს ტემპერატურას, და აბზაცს, რომელშიც გამოიტანება ვერდიქტი: წყალი თხევადია, წყალი მყარია, წყალი აირადია.

დავუშვათ, ჩვენი კალკულატორი წარმოადგენს კონტეინერ კომპონენტს Calculator:

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

გამოვყოთ ტემპერატურის შეყვანის input ველი კომპონენტში TempInp, ხოლო აბზაცი ვერდიქტით - კომპონენტში Verdict:

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

მარტივია გავიგოთ, რომ როგორც TempInp-ს, ასევე Verdict-ს უნდა ჰქონდეს სახელმწიფო ტემპერატურასთან. ამ შემთხვევაში ლოგიკურია, რომ ეს უნდა იყოს იგივე ტემპერატურა: მონაცემების input ველში შეყვანისას უნდა გამოისახოს ვერდიქტი.

ასეთ შემთხვევაში რეკომენდებულია გამოვიყენოთ ხერხი, რომელსაც ეწოდება სახელმწიფოს აწევა: სახელმწიფო, რომელიც საერთოა ორი (ან მეტი) კომპონენტისთვის, იწევა მაღლა მათ საერთო მშობელამდე.

ჩვენს შემთხვევაში გამოვა, რომ ტემპერატურის სახელმწიფო უნდა ეკუთვნოდეს კომპონენტს Calculator, რომელიც გადასცემს მას TempInp-ს და Verdict-ს როგორც props-ებს:

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

კომპონენტში TempInp უნდა იყოს input ველი ტემპერატურის შესაცვლელად. მაგრამ, რადგან ეს ტემპერატურა ამ კომპონენტის props-ია, პირდაპირ 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 ამოცანა, რომლებშიც საჭიროა სახელმწიფოს აწევის გამოყენება. დაწერეთ ამ ამოცანების ამონახსნები.