useContext Kontekst Huk u React-u

U ovoj lekciji ćemo nastaviti rad sa kontekstom. Sada ćemo izgraditi stablo komponenti. Za početak u posebnom fajlu kreiraćemo React komponentu BigBox:

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

Uvešćemo je i smestiti u našu glavnu komponentu App:

App.jsximport BigBox from './BigBox';

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

Za veću preglednost malo stilizujemo div-ove. Za to kreiraćemo fajl styles.css:

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

Nećemo zaboraviti da ga uvezemo u App.js:

App.jsximport './styles.css';

Sada u posebnom fajlu kreiraćemo komponentu MiddleBox:

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

I stavićemo je u veliku kutiju BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Ponovićemo sve isto sa malom kutijom SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Ja sam ... </p>
  );
}

Smeštaćemo dve takve kutije u MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Stablo smo izgradili. A sada mi želimo da iz našeg App prosledimo, recimo, u SmallBox string vrednost 'small box :)', ne koristeći props-e, već koristeći se kontekstom (u slučaju da se naša kutijasta aplikacija razroše do ogromnih razmera).

Fajl sa kontekstom MyContext.js mi već kreirasmo i povezali na prošloj lekciji.

Sledeći korak, koji ćemo uraditi - obmotati BigBox u provider konteksta, koji je svojstvo našeg objekta konteksta MyContext. Sada sve komponente, obuhvaćene ovom konstrukcijom (a to su i sve kutije, ugnježdene u BigBox) moći će da pristupe i pretplate se na promene konteksta. Kao vrednost konteksta prosleđujemo željenu 'small box :)':

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

A sada ostaje da se pročita vrednost konteksta. Želeli smo da ga koristimo u SmallBox, znači uvezimo tamo fajl konteksta MyContext.js i huk useContext:

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

Pročitaćemo pomoću useContext vrednost konteksta u promenljivu name:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Ja sam ... </p>
    </div>
  );
}

Pretplatili smo SmallBox na dati kontekst i, ako se on promeni, ova komponenta će takođe biti ažurirana.

I, konačno, zamenjujemo vrednost promenljive name umesto tri tačke:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Ja sam {name} </p>
    </div>
  );
}