Optel van State in React

Dikwels moet verskeie komponente dieselfde veranderende data weerspieël. In React word dit aanbeveel om die gedeelde state op te trek na die naaste gemeenskaplike voorouer. Kom ons kyk na 'n voorbeeld.

Laat ons sê ons wil 'n watertemperatuur-sakrekenaar maak. Dit sal bestaan uit 'n invoerveld waarin die gebruiker die temperatuur invoer, en 'n paragraaf waarin die uitspraak verskyn: water is vloeibaar, water is solied, water is gasvormig.

Laat ons sê ons sakrekenaar word voorgestel deur 'n houerkomponent Calculator:

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

Kom ons plaas die invoerveld vir die temperatuur in 'n komponent TempInp, en die paragraaf met die uitspraak - in 'n komponent Verdict:

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

Dit is maklik om te sien dat beide TempInp en Verdict 'n state met die temperatuur moet hê. Terselfdertyd is dit logies dat dit dieselfde temperatuur moet wees: soos data in die invoerveld ingevoer word, moet die uitspraak vertoon word.

In so 'n geval word die tegniek wat state optel genoem word, aanbeveel: state wat gedeel word deur twee (of meer) komponente word opgetrek na hul gemeenskaplike ouer.

In ons geval beteken dit dat die state met die temperatuur aan die komponent Calculator moet behoort, wat dit na TempInp en Verdict sal oordra as props:

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

In die komponent TempInp moet daar 'n invoerveld wees om die temperatuur te verander. Maar, aangesien hierdie temperatuur 'n prop van hierdie komponent is, kan dit nie direk in TempInp verander word nie. Die regte manier is om van die komponent Calculator 'n spesiale funksie vir verandering van die temperatuur oor te dra:

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

Ook, ons hoef nie 'n nuwe funksie te skep nie, ons kan die funksie setTemp direk na die kinderkomponent oordra:

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

Skryf die implementering van die komponente TempInp en Verdict.

Bedenk 3 take waar state optel gebruik moet word. Skryf oplossings vir hierdie take.