Reactda useContext Kontekst Huki

Ushbu darsda biz kontekst bilan ishlashni davom ettiramiz. Endi komponentlar daraxtini quramiz. Boshlanish uchun alohida faylda BigBox React komponentini yaratamiz:

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

Uni import qilamiz va asosiy App komponentimizga joylashtiramiz:

App.jsximport BigBox from './BigBox';

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

Yanada aniqroq qilish uchun divlarni biroz uslublashtiramiz. Buning uchun styles.css faylini yaratamiz:

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

Uni App.js ga import qilishni unutmaymiz:

App.jsximport './styles.css';

Endi alohida faylda MiddleBox komponentini yaratamiz:

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

Va uni katta qutining ichiga BigBox qo'yamiz:

BigBox.jsximport MiddleBox from './MiddleBox';

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

Kichkina quticha SmallBox bilan ham xuddi shu narsani qilamiz:

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

MiddleBox ga ikkita shunday qutichani joylashtiramiz:

MiddleBox.jsximport SmallBox from './SmallBox';

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

Biz daraxtni quradik. Endi esa biz App dan, aytaylik, SmallBox ga 'small box :)' satr qiymatini prop-lardan foydalanmasdan, kontekst yaratish orqali uzatishni xohlaymiz (go'yo bizning quticha ilovamiz ulkan o'lchamlarga yetadi).

MyContext.js kontekst faylini biz oldingi darsda yaratgan va ulagan edik.

Keyingi qadam, biz qiladigan narsa - BigBox ni kontekst provayderi ga o'rab qo'yamiz, bu bizning kontekst obyekti MyContext ning xususiyati. Endi ushbu konstruksiyaga o'ralgan barcha komponentlar (va bu BigBox ga joylashtirilgan barcha qutichalar) kontekstga kirish imkoniyatiga ega bo'ladilar va unga obuna bo'lishlari mumkin. Kontekst qiymati sifatida biz xohlagan 'small box :)' ni uzatamiz:

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

Va endi kontekst qiymatini o'qish qoldi. Biz uni SmallBox da ishlatmoqchi edik, shuning uchun u erga MyContext.js kontekst faylini va useContext hukini import qilamiz:

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

useContext yordamida kontekst qiymatini name o'zgaruvchisiga o'qiymiz:

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

Biz SmallBox ni ushbu kontekstga obuna qildik va agar u o'zgarsa, ushbu komponent ham yangilanadi.

Va nihoyat, name o'zgaruvchisi qiymatini uch nuqta o'rniga qo'yamiz:

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