Būsenos pakėlimas React

Dažnai keli komponentai turi atspindėti tas pačias kintančias duomenis. React rekomenduojama pakelti bendrą būseną iki artimiausio bendro protėvio. Pažiūrėkime pavyzdžiu.

Tarkime, norime padaryti vandens temperatūros skaičiuotuvą. Jis bus įvesties laukas, kuriame vartotojas įves temperatūrą, ir pastraipa, kurioje bus rodoma išvada: vanduo skystas, vanduo kietas, vanduo dujinis.

Tarkime, mūsų skaičiuotuvas yra konteinerinis komponentas Calculator:

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

Išskirkime įvesties lauką temperatūros įvedimui į komponentą TempInp, o pastraipą su išvada - į komponentą Verdict:

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

Lengva suprasti, kad ir TempInp, ir Verdict turi turėti būseną su temperatūra. Tuo pat metu logiška, kad tai turi būti ta pati temperatūra: Kai įvedami duomenys į įvesties lauką, turi rodyti išvadą.

Tokiu atveju rekomenduojama naudoti metodą, vadinamą būsenos pakėlimu: būsena, bendra dviem (ar daugiau) komponentams, pakeliama aukštyn iki jų bendro tėvinio komponento.

Mūsų atveju pasirodys, kad būsena su temperatūra turi priklausyti komponentui Calculator, kuris perduos ją į TempInp ir Verdict kaip propsus:

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

Komponente TempInp turi būti įvesties laukas temperatūros keitimui. Bet, kadangi ši temperatūra yra šio komponento propsas, tai tiesiogiai TempInp jį keisti negalima. Teisinga būtų perduoti iš komponento Calculator specialią funkciją temperatūrai keisti:

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

Galima, beje, neįvesti naujos funkcijos, o perduoti į antrinį komponentą funkciją setTemp:

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