Huku i Kontekstit useContext në React

Në këtë mësim do të vazhdojmë punën me kontekstin. Tani do të ndërtojmë një pemë komponentësh. Për fillim, në një skedar të veçantë krijojmë komponentin React BigBox:

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

Le ta importojmë dhe ta vendosim në komponentin tonë kryesor App:

App.jsximport BigBox from './BigBox';

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

Për qartësi më të madhe, le t'i stilizojmë pak div-et. Për këtë, krijojmë skedarin styles.css:

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

Të mos harrojmë ta importojmë atë në App.js:

App.jsximport './styles.css';

Tani, në një skedar të veçantë krijojmë komponentin MiddleBox:

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

Dhe ta vendosim në kutinë e madhe BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Le të bëjmë të njëjtën gjë me kutinë e vogël SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Unë jam ... </p>
  );
}

Le të vendosim dy kuti të tilla në MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Pemën e kemi ndërtuar. Tani ne duam që nga App ynë të transmetojmë, sipas supozimit, në SmallBox një vlerë tekstore 'small box :)', pa përdorur props, duke përdorur kontekstin (po sikur aplikacioni ynë i kutive të rritet në përmasa të mëdha).

Skedarin me kontekstin MyContext.js ne e kemi krijuar dhe lidhur tashmë në mësimin e kaluar.

Hapi tjetër që do të bëjmë - do ta mbështjellim BigBox në provider-in e kontekstit, i cili është veti e objektit tonë të kontekstit MyContext. Tani të gjithë komponentët, të mbyllur në këtë konstruksion (dhe këto janë të gjitha kutitë, të vendosura në BigBox) do të mund të marrin qasje dhe të abonohen në ndryshimet e kontekstit. Si vlerë të kontekstit ne transmetojmë atë që dëshirojmë 'small box :)':

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

Dhe tani mbetet vetëm të lexohet vlera e kontekstit. Ne donim ta përdornim atë në SmallBox, pra importojmë aty skedarin e kontekstit MyContext.js dhe hukun useContext:

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

Le të lexojmë me ndihmën e useContext vlerën e kontekstit në variablin name:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Unë jam ... </p>
    </div>
  );
}

Ne e kemi abonuar SmallBox në këtë kontekst dhe, nëse ai ndryshon, ky komponent gjithashtu do të përditësohet.

Dhe, së fundi, vendosim vlerën e variablit name në vend të elipsës:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Unë jam {name} </p>
    </div>
  );
}