Reactda useContext Kontekst Huki

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

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

Uni import qilamiz va asosiy App komponentimizga joylashtiramiz:

import BigBox from './BigBox';

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

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

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

Uni App.js ga import qilishni unutmaymiz:

import './styles.css';

Endi alohida faylda MiddleBox komponentini yaratamiz:

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

Va uni katta qutining ichiga BigBox qo'yamiz:

import MiddleBox from './MiddleBox';

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

Kichkina quticha SmallBox bilan ham xuddi shu narsani qilamiz:

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

MiddleBox ga ikkita shunday qutichani joylashtiramiz:

import 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:

function 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:

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

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

function 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:

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

Bo'sh App komponentida Parent komponentini yarating, unda Daughter komponentini, Daughter da esa Grandson komponentini yarating. Kontekstdan foydalanib, App dan 42 yosh qiymatini uzating va useContext yordamida uni Daughter komponentida chiqaring.

Endi esa Grandson komponentida yosh qiymatini chiqaring, lekin 2 ga bo'lingan holda.