A useContext kontextus hook a React-ben

Ebben a leckében folytatjuk a kontextussal való munkát. Most építünk egy komponensfát. Kezdetként hozzunk létre egy külön fájlban egy React komponenst BigBox néven:

BigBox.jsxfunction BigBox() {
  return (
    <p>bigbox</p>
  );
}

Importáljuk és helyezzük el a fő komponensünkben, a App-ben:

App.jsximport BigBox from './BigBox';

function App() {
  return (
    <BigBox />
  );
}

A jobb áttekinthetőség érdekében kissé stílusosítsuk a diveket. Ehhez hozzunk létre egy styles.css fájlt:

styles.cssdiv {
  border: 1px solid blue;
  margin: 10px;
  text-align: center;
  max-width: 300px;
}

Ne felejtsük el importálni a App.js fájlba:

App.jsximport './styles.css';

Most hozzunk létre egy külön fájlban egy MiddleBox komponenst:

MiddleBox.jsxfunction MiddleBox() {
  return (
    <p>middlebox</p>
  );
}

És tegyük a nagy dobozba, a BigBox-ba:

BigBox.jsximport MiddleBox from './MiddleBox';

function BigBox() {
  return (
    <div>
      <MiddleBox />
    </div>
  );
}

Ismételjük meg ugyanezt a kis dobozocskával, a SmallBox-val:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Én vagyok ... </p>
  );
}

Helyezzünk el két ilyen dobozocskát a MiddleBox-ban:

MiddleBox.jsximport SmallBox from './SmallBox';

function MiddleBox() {
  return (
    <div>
      <SmallBox />
      <SmallBox />
    </div>
  );
}

A fát felépítettük. Most pedig azt szeretnénk, hogy a App komponensünk továbbítson, tegyük fel, a SmallBox-nak egy 'kis doboz :)' string értéket, a prop-ok használata nélkül, a kontextust használva (ha esetleg a dobozos alkalmazásunk hatalmasra nőne).

A kontextus fájlját, a MyContext.js-t már létrehoztuk és csatlakoztattuk az előző leckében.

A következő lépés, amit megteszünk - becsomagoljuk a BigBox-t a kontextus provider-be, ami a kontextus objektumunk, a MyContext tulajdonsága. Mostantól minden komponens, ami ebbe a konstrukcióba van zárva (és ez minden BigBox-ba ágyazott dobozocska) hozzáférhet a kontextushoz és feliratkozhat a kontextus változásaira. A kontextus értékeként továbbítjuk a kívánt 'kis doboz :)' értéket:

App.jsxfunction App() {
  return (
    <MyContext.Provider value="kis doboz :)">
      <BigBox />
    </MyContext.Provider>
  );
}

És már csak a kontextus értékét kell elkérnünk. A SmallBox-ban akartuk használni, tehát importáljuk oda a kontextus fájlt, a MyContext.js-t és a useContext hookot:

SmallBox.jsximport { useContext } from 'react';
import { MyContext } from './MyContext.js';

Olvassuk el a useContext segítségével a kontextus értékét a name változóba:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Én vagyok ... </p>
    </div>
  );
}

Feliratkoztattuk a SmallBox-ot erre a kontextusra, és ha az megváltozik, ez a komponens is frissülni fog.

Végül pedig behelyettesítjük a name változó értékét a három pont helyére:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Én vagyok {name} </p>
    </div>
  );
}