Reactда состоянияларни кўтариш

Кўпинча бир нечта компонентлар бир хил ўзгарувчан маълумотларни акс этиши керак бўлади. Reactда умумий состоянияни энг якин умумий отага кўтариш тавсия этилади. Келгила, мисолда кўрамиз.

Фарз қилайлик, биз сув harorati ҳисоблагчиси ясамоқчимиз. У фойдаланувчи haroratни киритадиган инпут, ва унга қараб хулоса чиқарадиган абзацдан иборат бўлади: сув суюқ, сув қаттиқ, сув газ ҳолатида.

Фарз қилайлик, бизнинг ҳисоблагчимиз Calculator контейнер-компонентини ифодаласин:

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

Киргитиш учун инпутни TempInp компонентига, хулоса билан абзацни эса Verdict компонентига ажратамиз:

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

TempInp ҳам, Verdict ҳам harorat билан состоянияга эга бўлишини тушуниш қийин эмас. Бунда, мантиқан, бир хил harorat бўлиши керак: инпутга маълумотлар киритилган сайин хулоса кўрсатилиши керак.

Бундай ҳолда сонияни кўтариш деб аталувчи усулдан фойдаланиш тавсия этилади: икки (ва ундан ортиқ) компонентлар учун умумий бўлган состояния юқорига, уларнинг умумий отасига кўтарилади.

Бизнинг ҳолатимизда, harorat билан состояния Calculator компонентига тегишли бўлиши керак, у уни TempInp ва Verdict компонентларига пропслар сифатида ўтказади:

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

TempInp компонентида haroratни ўзгартириш учун инпут бўлиши керак. Лекин, бу harorat ушбу компонентнинг пропси бўлгани сабабли, ундирект TempInp да уни ўзгартириб бўлмайди. Тўғриси Calculator компонентидан haroratни ўзгартириш учун максус функцияни ўтказиш бўлади:

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