Хук кантэксту useContext у React

У гэтым уроку мы працягнем працу з кантэкстам. Цяпер побудуем дрэва кампанентаў. Для пачатку ў асобным файле створым React кампанент BigBox:

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

Імпартуем яго і размясцім у нашым галоўным кампаненце App:

App.jsximport BigBox from './BigBox';

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

Для большай нагляднасці крыху стылізуем дывы. Для гэтага створым файл styles.css:

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

Не забудзем імпартаваць яго ў App.js:

App.jsximport './styles.css';

Цяпер у асобным файле створым кампанент MiddleBox:

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

І пакладзем яго ў вялікую каробку BigBox:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Праробім усё таксама сама з маленькай каробачкай SmallBox:

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

Размясцім дзве такіх каробачкі ў MiddleBox:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Дрэва мы з вамі пабудавалі. А цяпер мы хочам ад нашага App перадаць, дапусцім, у SmallBox радковае значэнне 'small box :)', не выкарыстоўваючы пропсы, а карыстаючыся кантэкстам (раптоў наша каробачнае прыкладанне разрасцецца да велізарных памераў).

Файл з кантэкстам MyContext.js мы ўжо стварылі і падключылі на мінулым уроку.

Наступны крок, які мы зробім - абернем BigBox у правайдэр кантэксту, які з'яўляецца ўласцівасцю нашага аб'екта кантэксту MyContext. Цяпер усе кампаненты, заключаныя ў дадзеную канструкцыю (а гэта і ўсе каробачкі, укладзеныя ў BigBox) змогуць атрымаць доступ і падпісацца на змены кантэксту. У якасці значэння кантэксту мы перадаем жаданае 'small box :)':

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

А цяпер засталося прачытаць значэнне кантэксту. Мы хацелі выкарыстоўваць яго ў SmallBox, значыць імпартуем туды файл кантэксту MyContext.js і хук useContext:

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

Прачытаем з дапамогай useContext значэнне кантэксту ў зменную name:

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

Мы падпісалі SmallBox на дадзены кантэкст і, калі ён зменіцца, гэты кампанент таксама будзе абноўлены.

І, нарэшце, падстаўляем значэнне зменнай name замест шматкроп'я:

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