Aktualizace kontextu v Reactu

V této lekci se podíváme na aktualizaci komponent při změně hodnoty kontextu. Předpokládejme, že budete chtít, aby se kontext měnil.

V tomto případě je užitečné používat kontext ve spojení se stavy. Pojďme trochu upravit naši aplikaci s krabičkami, kterou jsme dělali v minulé lekci a uděláme to, aby po kliknutí na tlačítko předávaná hodnota změnila na 'metal box :)'.

Takže, vezmeme náš soubor App a po BigBox nakreslíme tlačítko:

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

Dále importujeme hook useState a zavedeme state name, jehož hodnota se bude měnit po kliknutí na tlačítko. Nastavíme mu počáteční hodnotu tu, kterou jsme ihned předávali hodnotou kontextu, tedy 'small box :)':

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

Tentokrát kontextem budeme předávat ne řetězec, ale state name:

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

Jako poslední krok budeme volat obsluhu kliknutí na tlačítko a pomocí funkce setName nastavovat novou hodnotu stavu na 'metal box :)'. Poté bude možné kliknout na tlačítko a vyzkoušet výsledek:

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