Վիճակի բարձրացում 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 առաջադրանքներ, որոնցում անհրաժեշտ է օգտագործել վիճակի բարձրացում: Գրեք այդ առաջադրանքների լուծումները: