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>Мен ... </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>Мен ... </p>
    </div>
  );
}

Біз SmallBox-ті осы контекстке жазылдық және егер ол өзгерсе, бұл компонент де жаңартылады.

Соңында, үш нүктенің орнына name айнымалысының мәнін қоямыз:

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