A kontextus frissítése Reactben

Ebben a leckében a komponensek frissítését vizsgáljuk a kontextus értékének változásakor. Tegyük fel, hogy azt szeretné, ha a kontextus változna.

Ebben az esetben hasznos a kontextust állapotokkal együtt alkalmazni. Változtassuk meg egy kicsit a dobozokkal foglalkozó alkalmazásunkat, amelyet az előző leckében készítettünk, és tegyük úgy, hogy egy gomb megnyomására az átadott érték 'metal box :)' legyen.

Tehát vegyük a App fájlunkat, és a BigBox után rajzoljunk egy gombot:

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

Ezután importáljuk a useState hookot, és hozzunk létre egy name állapotot, amelynek értéke a gomb megnyomásakor változik. Adjunk neki kezdeti értékként azt, amit azonnal átadtunk a kontextus értékeként, azaz 'small box :)':

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

Ezúttal a kontextussal nem egy sztringet, hanem a name állapotot adjuk át:

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

Utolsó lépésként meghívjuk a gombra kattintás kezelőjét, és a setName függvény segítségével beállítjuk az új értéket az állapotnak 'metal box :)' értékre. Ezután megnyomhatjuk a gombot és ellenőrizhetjük az eredményt:

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