Kontextový hook useContext v Reacte

V tejto lekcii budeme pokračovať v práci s kontextom. Teraz vytvoríme strom komponentov. Na začiatok v samostatnom súbore vytvoríme React komponent BigBox:

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

Importujeme ho a umiestnime ho v našom hlavnom komponente App:

App.jsximport BigBox from './BigBox';

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

Pre väčšiu názornosť trochu naštýlujeme divy. Na to vytvoríme súbor styles.css:

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

Nezabudneme ho importovať do App.js:

App.jsximport './styles.css';

Teraz v samostatnom súbore vytvoríme komponent MiddleBox:

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

A umiestnime ho do veľkej krabice BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Urobíme to isté s malou krabičkou SmallBox:

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

Umiestnime dve takéto krabičky do MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Strom sme postavili. A teraz chceme od nášho App odovzdať, predpokladajme, do SmallBox reťazcovú hodnotu 'small box :)', bez použitia propsov, ale pomocou kontextu (čo ak sa naša krabicová aplikácia rozrastie do obrovských rozmerov).

Súbor s kontextom MyContext.js sme už vytvorili a pripojili v predchádzajúcej lekcii.

Ďalší krok, ktorý urobíme - obalíme BigBox do poskytovateľa kontextu, ktorý je vlastnosťou nášho objektu kontextu MyContext. Teraz všetky komponenty uzavreté v tejto konštrukcii (a to sú všetky krabičky vnorené do BigBox) budú mať prístup a budú sa môcť prihlásiť na zmeny kontextu. Ako hodnotu kontextu odovzdávame požadovanú 'small box :)':

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

A teraz už zostáva len prečítať hodnotu kontextu. Chceli sme ho použiť v SmallBox, takže importujeme tam súbor kontextu MyContext.js a hook useContext:

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

Prečítajme si pomocou useContext hodnotu kontextu do premennej name:

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

Prihlásili sme SmallBox na tento kontext a ak sa zmení, tento komponent bude tiež aktualizovaný.

A nakoniec dosadíme hodnotu premennej name namiesto troch bodiek:

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