Reactда useContext контекст хуки

Бу дарсда биз контекст билан ишлашни давом эттирурмиз. Энди компонентлар дарахтини курамиз. Бошлаш учун алохида файлда 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>Men ... </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>Men ... </p>
    </div>
  );
}

Биз SmallBoxни бу контекстга обуна қилдик ва, агар у ўзгарса, бу компонент ҳам янгиланади.

Ва, ниҳоят, ўзгарувчи қийматини name учнуқ нуқталар ўрнига қўямиз:

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