Aktualizácia kontextu v React

V tejto lekcii sa pozrieme na aktualizáciu komponentov pri zmene hodnoty kontextu. Predpokladajme, že budete chcieť, aby sa kontext menil.

V tomto prípade je užitočné použiť kontext v spojení so stavmi. Poďme trochu upraviť našu aplikáciu s krabicami, ktorú sme robili na minulej lekcii a urobme to tak, aby po kliknutí na tlačidlo sa prenášaná hodnota zmenila na 'metal box :)'.

Takže, vezmeme náš súbor App a po BigBox nakreslíme tlačidlo:

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

Ďalej importujeme hook useState a vytvoríme stav name, ktorého hodnota sa bude meniť po kliknutí na tlačidlo. Nastavíme mu počiatočnú hodnotu takú, ktorú sme okamžite predávali hodnotou kontextu, teda 'small box :)':

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

Tentoraz budeme kontextom predávať nie reťazec, ale stav name:

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

Ako posledný krok budeme volať obsluhu kliknutia na tlačidlo a pomocou funkcie setName nastavíme novú hodnotu stavu na 'metal box :)'. Potom bude možné kliknúť na tlačidlo a skontrolovať výsledok:

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