Heving av tilstand i React

Ofte må flere komponenter reflektere de samme foranderlige dataene. I React anbefales det å heve den delte tilstanden opp til nærmeste felles forfedre. La oss se på et eksempel.

La oss si at vi ønsker å lage en kalkulator for vanntemperatur. Den vil representere et input-felt, der brukeren skal skrive inn temperaturen, og et avsnitt, der det vil bli vist en vurdering: vannet er flytende, vannet er fast, vannet er gassformet.

La oss si at kalkulatoren vår representerer en container-komponent Calculator:

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

La oss skille ut input-feltet for temperaturinntasting i en komponent TempInp, og avsnittet med vurderingen - i en komponent Verdict:

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

Det er lett å forstå at både TempInp og Verdict må ha en tilstand med temperaturen. Samtidig er det logisk at dette må være den samme temperaturen: etter hvert som data skrives inn i input-feltet, må vurderingen vises.

I så fall anbefales det å bruke en teknikk, kalt tilstandsheving: tilstanden, som er felles for to (eller flere) komponenter, heves opp til deres felles forelder.

I vårt tilfelle vil det resultere i at tilstanden med temperaturen må tilhøre komponenten Calculator, som vil sende den til TempInp og Verdict som props:

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

I komponenten TempInp må det være et input-felt for å endre temperaturen. Men, siden denne temperaturen er en prop for denne komponenten, kan den ikke endres direkte i TempInp. Riktig måte vil være å sende fra komponenten Calculator en spesiell funksjon for å endre temperaturen:

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

Man kan, forresten, ikke introdusere en ny funksjon, men sende funksjonen setTemp til barnekomponenten:

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