Pozdvihovanie stavu v React

Niekoľko komponentov často musí zobrazovať rovnaké meniace sa dáta. V Reacte sa odporúča pozdvihnúť spoločný stav k najbližšiemu spoločnému predkovi. Pozrime sa na príklad.

Povedzme, že chceme vytvoriť kalkulačku teploty vody. Bude pozostávať zo vstupného poľa, do ktorého používateľ zadá teplotu, a odseku, do ktorého sa bude vypisovať verdikt: voda je kvapalná, voda je tuhá, voda je plynná.

Povedzme, že naša kalkulačka je kontajnerový komponent Calculator:

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

Vynesme vstupné pole pre zadanie teploty do komponentu TempInp a odsek s verdiktom - do komponentu Verdict:

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

Je ľahké pochopiť, že ako TempInp, tak Verdict musia mať stav s teplotou. Zároveň je logické, že by to mala byť tá istá teplota: po zadaní údajov do vstupného poľa sa musí zobraziť verdikt.

V takom prípade sa odporúča použiť techniku nazývanú pozdvihovanie stavu: stav, ktorý je spoločný pre dva (alebo viac) komponentov, sa pozdvihne hore k ich spoločnému rodičovi.

V našom prípade to znamená, že stav s teplotou by mal patriť komponentu Calculator, ktorý ho bude odovzdávať do TempInp a Verdict ako props:

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

V komponente TempInp by malo byť vstupné pole pre zmenu teploty. Ale keďže táto teplota je props tohto komponentu, nie je možné ju priamo v TempInp meniť. Správne bude odovzdať z komponentu Calculator špeciálnu funkciu pre zmenu teploty:

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

Mimochodom, nie je potrebné zavádzať novú funkciu, stačí odovzdať do dcérskeho komponentu funkciu setTemp:

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