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

Бу дарсда биз контекст билан ишлашни давом эттирурмиз. Энди компонентлар дарахтини курамиз. Бошлаш учун алохида файлда React компонентини яратамиз BigBox:

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

Уни импорт киламиз ва асосий компонентимиз Appда жойлаштирамиз:

import BigBox from './BigBox';

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

Кўпроқ кўриниши учун бир оз стилламмиз дивларни. Бунинг учун файл яратамиз styles.css:

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

Уни импорт килишни унутмаймиз App.jsга:

import './styles.css';

Энди алохида файлда яратамиз компонент MiddleBox:

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

Ва уни катта қутичага BigBoxга қўямиз:

import MiddleBox from './MiddleBox';

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

Хаммасини кичкина қутича SmallBox билан такрорлаймиз:

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

Иккита шундай қутичани жойлаштирамиз MiddleBoxда:

import SmallBox from './SmallBox';

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

Дарахтни курдик. Энди биз Appдан ўтказмоқчимиз, фарз қилайлик, SmallBoxга сатрли қиймат 'small box :)'ни, пропслардан фойдаланмасдан, контекст орқали (агар бизнинг қутича иловамиз катта ўлчамларга етса).

Контекст файли MyContext.jsни аллакача яратган ва ўтган дарсда уланган эдик.

Кейинги қадам, биз қиладиган - BigBoxни контекст провайдерига ўраймиз, у бизнинг контекст объектимиз MyContextни хоссасидир. Энди ҳамма компонентлар, бу конструкцияга киритилганлар (ва бу BigBoxга киритилган ҳамма қутичалар) контекстга доступ олиши ва унинг ўзгаришларига обуна бўлиши мумкин. Контекст қиймати сифатида биз хохлаган 'small box :)'ни ўтказамиз:

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

Энди контекст қийматини ўқиш қолди. Биз уни SmallBoxда ишлатмоқчи эдик, демак унга контекст файли MyContext.jsни ва useContext хукини импорт киламиз:

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

useContext ёрдамида контекст қийматини name ўзгарувчисига ўқиймиз:

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

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

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

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

Бўш компонентда App яратинг компонент Parent, ва унда компонент Daughter, ва Daughterда компонент Grandson. Контекстдан фойдаланиб, Appдан ёш қийматини ўтказинг 42, ва useContext ёрдамида уни Daughter компонентида чиаринг.

Энди Grandson компонентида ёш қийматини чиаринг, лекин 2га бўлинган ҳолда.