Подигање на state во React

Често неколку компоненти треба да ги reflektiraat истите променливи податоци. Во React се препорачува заедничкиот state да се подигне до најблискиот заеднички предок. Ајде да погледнеме на пример.

Нека сакаме да направиме калкулатор за температура на водата. Тој ќе претставува input, во кој корисникот ќе ја внесува температурата, и параграф, во кој ќе се испише вердикт: водата е течна, водата е цврста, водата е гасовита.

Нека нашиот калкулатор претставува container-компонента Calculator:

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

Да го изнесеме input-от за внес на температура во компонента TempInp, а параграфот со вердиктот - во компонента Verdict:

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

Лесно е да се сфати дека и TempInp, и Verdict треба да имаат state со температура. При тоа, логично е дека ова треба да биде истата температура: како што се внесуваат податоци во input-от, треба да се прикажува вердиктот.

Во таков случај се препорачува да се користи техника, наречена подигање на state: state-от, заеднички за две (или повеќе) компоненти се подига нагоре до нивниот заеднички родител.

Во нашиот случај ќе испадне дека state-от со температурата треба да му припаѓа на компонентата Calculator, која ќе го пренесува во TempInp и Verdict како props:

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

Во компонентата TempInp треба да има input за промена на температурата. Но, бидејќи оваа температура е prop на оваа компонента, директно во TempInp не може да се промени. Правилно ќе биде од компонентата Calculator да се пренесе специјална функција за промена на температурата:

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

Може, патем, да не се воведува нова функција, туку во детската компонента да се пренесе функцијата setTemp:

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