React-da useContext Kontekst Huku

Bu dersde biz kontekstle islemeye davam edeceyik. Indi komponentler agacini quracagiq. Evvelce ayri bir faylda React komponenti BigBox yaradaq:

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

Onu import edek ve esas komponentimiz App-de yerlesdirek:

App.jsximport BigBox from './BigBox';

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

Daha aydin olmasi ucun divleri bir az stilize edek. Bunun ucun styles.css faylini yaradaq:

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

Onu App.js-de import etmeyi unutmayaq:

App.jsximport './styles.css';

Indi ayri bir faylda MiddleBox komponentini yaradaq:

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

Ve onu boyuk qutunun BigBox icine qoyaq:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Eyni seyleri kicik qutucuq SmallBox ucun de edek:

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

Iki belə qutucugu MiddleBox -in icine yerlesdirek:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Agacı qurduq. Indi ise biz App -den, deyek ki, SmallBox -a 'small box :)' metn qiymetini proplar istifade etmeden, kontekstden istifade etmekle vermek isteyirik (baska ola ki, qutucuq proqramimiz boyuk olculere catar).

Kontekst fayli MyContext.js -ni onsuz da evvelki dersde yaratmishiq ve baglamishiq.

Edəcəyimiz növbəti addım, BigBox -i kontekstin provider -i ile sarmalamaqdir, ki bu da kontekst obyektimiz MyContext -nin xüsusiyyətidir. Indi bu konstruksiyanın içine qoyulmuş bütün komponentler (bu da BigBox -in icine qoyulmuş bütün qutucuqlardir) kontekste müraciət edə və onun dəyişikliklərinə abunə ola bilər. Kontekstin qiyməti kimi istədiyimiz 'small box :)' -ni ötürürük:

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

Indi ise kontekstin qiymetini oxumaq qalir. Biz onu SmallBox -da istifade etmek isteyirdik, demeli kontekst faylini MyContext.js ve useContext hookunu ora import edek:

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

useContext vasitesile kontekstin qiymetini name deyisenine oxuyaq:

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

Biz SmallBox -i bu kontekste abune etdik ve əgər o deyişerse, bu komponent de yenilenecek.

Ve nəhayət, üç nöqte yerine name deyişeninin qiymetini qoyuruq:

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