Konteksto hukas useContext React'e

Šioje pamokoje mes tęsime darbą su kontekstu. Dabar sukursime komponentų medį. Pirmiausia atskirame faile sukursime React komponentą BigBox:

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

Importuokime jį ir patalpinkime savo pagrindiniame komponente App:

App.jsximport BigBox from './BigBox';

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

Kad būtų aiškiau, šiek tiek stilizuokime div'us. Tam sukurkime failą styles.css:

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

Nepamirškime jį importuoti į App.js:

App.jsximport './styles.css';

Dabar atskirame faile sukurkime komponentą MiddleBox:

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

Ir padėkime jį į didelę dėžutę BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Padarykime tą patį su maža dėžute SmallBox:

SmallBox.jsxfunction SmallBox() {
  return (
    <p>Aš esu ... </p>
  );
}

Patalpinkime dvi tokias dėžutes į MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Medį mes pastatėme. O dabar mes norime iš mūsų App perduoti, tarkime, į SmallBox eilutės reikšmę 'small box :)', ne naudojant props'ų, o naudojantis kontekstu (staiga mūsų dėžutė programa išaugs iki didelių matmenų).

Failą su kontekstu MyContext.js mes jau sukūrėme ir prijungėme praeitoje pamokoje.

Kitas žingsnis, kurį atliksime - apgaubsime BigBox konteksto provider'iu, kuris yra mūsų konteksto objekto savybė MyContext. Dabar visi komponentai, įtraukti į šią konstrukciją (o tai ir visos dėžutės, įdėtos į BigBox) galės gauti prieigą ir prenumeruoti konteksto pakeitimus. Kaip konteksto reikšmę mes perduodame norimą 'small box :)':

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

O dabar belieka perskaityti konteksto reikšmę. Mes norėjome jį naudoti SmallBox, vadinasi importuokime ten konteksto failą MyContext.js ir huką useContext:

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

Perskaitykime naudodami useContext konteksto reikšmę į kintamąjį name:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Aš esu ... </p>
    </div>
  );
}

Mes prenumeravome SmallBox šiam kontekstui ir, jei jis pasikeis, šis komponentas taip pat bus atnaujintas.

Ir, galiausiai, pakeičiame kintamojo name reikšmę vietoje daugtaškio:

SmallBox.jsxfunction SmallBox() {
  const name = useContext(MyContext);
  
  return (
    <div>
      <p>Aš esu {name} </p>
    </div>
  );
}