Издигане на състояния в React

Често няколко компонента трябва да отразяват едни и същи променящи се данни. В React се препоръчва общото състояние да се издига до най-близкия общ родител. Нека да разгледаме един пример.

Да приемем, че искаме да направим калкулатор за температурата на водата. Той ще представлява поле за въвеждане, в което потребителят ще въвежда температурата, и параграф, в който ще се извежда вердикт: водата е течна, водата е твърда, водата е газообразна.

Да приемем, че нашият калкулатор представлява контейнерен компонент Calculator:

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

Нека изнесем полето за въвеждане на температурата в компонент TempInp, а параграфа с вердикта - в компонент Verdict:

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

Лесно е да се разбере, че както TempInp, така и Verdict трябва да имат състояние с температурата. В същото време е логично, че това трябва да е една и съща температура: докато се въвеждат данни в полето, трябва да се показва вердиктът.

В такъв случай се препоръчва да се използва прием, наречен издигане на състоянието: състоянието, общо за два (или повече) компонента, се издига нагоре до техния общ родител.

В нашия случай ще се получи, че състоянието с температурата трябва да принадлежи на компонента Calculator, който ще го предава на TempInp и Verdict като пропсове:

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

В компонента TempInp трябва да има поле за въвеждане за промяна на температурата. Но, тъй като тази температура е пропс на този компонент, то директно в 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>;
}