Kontekstin päivittäminen Reactissa

Tässä oppitunnissa tarkastelemme komponenttien päivittämistä kontekstin arvon muuttuessa. Oletetaan, että haluat kontekstin muuttuvan.

Tässä tapauksessa on hyödyllistä käyttää kontekstia yhdessä tilojen kanssa. Muutetaan hieman laatikko-sovellustamme, jota teimme edellisellä oppitunnilla, ja tehdään niin, että painiketta napsauttamalla välitetty arvo muuttuu arvoksi 'metal box :)'.

Joten, otetaan tiedostomme App ja BigBox-komponentin jälkeen piirretään painike:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="small box :)">
      <BigBox />
      <button>click</button>
    </MyContext.Provider>
  );
}

Seuraavaksi tuodaan useState-hookki ja luodaan tila name, jonka arvo muuttuu painiketta napsautettaessa. Asetetaan sille alkuarvoksi sama arvo, jonka välitimme kontekstin arvona, eli 'small box :)':

App.jsxfunction App() {
  const [name, setName] = useState('small box :)');
}

Tällä kertaa kontekstilla emme välitä merkkijonoa, vaan tilan name:

App.jsx<MyContext.Provider value={name}>
  <BigBox />
  <button>click</button>
</MyContext.Provider>

Viimeisenä vaiheena käsittelemme painikkeen napsautuksen ja asetamme setName-funktion avulla uuden tilan arvoksi 'metal box :)'. Tämän jälkeen voit painaa painiketta ja tarkastaa tuloksen:

App.jsx<button onClick={() => {
  setName('metal box :)');
}}>click</button>