Dvig stanj v React

Pogosto mora več komponent odražati iste spreminjajoče se podatke. V React je priporočljivo, da skupno stanje dvignemo do najbližjega skupnega prednika. Poglejmo si primer.

Recimo, da želimo narediti kalkulator temperature vode. Predstavljal bo vnosno polje, v katerega bo uporabnik vnašal temperaturo, in odstavek, v katerega bo izpisana sodba: ali je voda tekoča, trdna ali plinasta.

Recimo, da naš kalkulator predstavlja komponento-vsebnik Calculator:

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

Izločimo vnosno polje za temperaturo v komponento TempInp, odstavek s sodbo pa v komponento Verdict:

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

Zlahka je razumeti, da morata tako TempInp kot Verdict imeti stanje s temperaturo. Ob tem je logično, da mora biti to ista temperatura: med vnašanjem podatkov v vnosno polje mora biti prikazana sodba.

V takem primeru je priporočljivo uporabiti tehniko, imenovano dvig stanja: stanje, ki je skupno dvema (ali več) komponentama, se dvigne navzgor do njihovega skupnega starša.

V našem primeru se bo izkazalo, da mora stanje s temperaturo pripadati komponenti Calculator, ki ga bo posredoval v TempInp in Verdict kot lastnosti (props):

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

V komponenti TempInp mora biti vnosno polje za spreminjanje temperature. Toda, ker je temperatura lastnost (prop) te komponente, je ne moremo neposredno spreminjati v TempInp. Pravilno je, da iz komponente Calculator posredujemo posebno funkcijo za spreminjanje temperature:

jsxfunction Calculator() {
  const [temp, setTemp] = useState(0);
  
  function changeTemp(event) {
    setTemp(event.target.value);
  }
  
  return <div>
    <Verdict temp={temp} />
    <TempInp temp={temp} changeTemp={changeTemp} />
  </div>;
}

Lahko tudi, mimogrede, ne uvedemo nove funkcije, ampak podrejeni komponenti posredujemo funkcijo setTemp:

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