Hook kontekstu useContext w React

W tej lekcji kontynuujemy pracę z kontekstem. Teraz zbudujemy drzewo komponentów. Na początku w osobnym pliku utwórzmy komponent React BigBox:

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

Zaimportujmy go i umieśćmy w naszym głównym komponencie App:

App.jsximport BigBox from './BigBox';

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

Dla większej przejrzystości nieco ostylujmy divy. W tym celu utwórzmy plik styles.css:

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

Nie zapomnijmy go zaimportować w App.js:

App.jsximport './styles.css';

Teraz w osobnym pliku utwórzmy komponent MiddleBox:

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

I umieśćmy go w dużym pudełku BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Zróbmy to samo z małym pudełeczkiem SmallBox:

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

Umieśćmy dwa takie pudełeczka w MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Drzewo zbudowaliśmy. A teraz chcemy z naszego App przekazać, przypuśćmy, do SmallBox łańcuchową wartość 'small box :)', nie używając propsów, a korzystając z kontekstu (nagle nasza pudełkowa aplikacja rozrośnie się do ogromnych rozmiarów).

Plik z kontekstem MyContext.js my już utworzyliśmy i podłączyliśmy w poprzedniej lekcji.

Następny krok, który zrobimy - opakujemy BigBox w dostawcę kontekstu, który jest właściwością naszego obiektu kontekstu MyContext. Teraz wszystkie komponenty, zawarte w tej konstrukcji (a to i wszystkie pudełeczka, zagnieżdżone w BigBox) będą mogły uzyskać dostęp i subskrybować zmiany kontekstu. Jako wartość kontekstu przekazujemy pożądaną 'small box :)':

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

A teraz pozostało odczytać wartość kontekstu. Chcieliśmy użyć jej w SmallBox, więc zaimportujmy tam plik kontekstu MyContext.js i hook useContext:

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

Odczytywanie za pomocą useContext wartości kontekstu do zmiennej name:

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

Subskrybowaliśmy SmallBox na ten kontekst i, jeśli się zmieni, ten komponent również zostanie zaktualizowany.

I, na koniec, podstawiamy wartość zmiennej name zamiast wielokropka:

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