Контекст hook 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 и hook-от 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>
  );
}