React-da useContext Kontekst Huku

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

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

Onu import edek ve esas komponentimiz App-de yerlesdirek:

import BigBox from './BigBox';

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

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

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

Onu App.js-de import etmeyi unutmayaq:

import './styles.css';

Indi ayri bir faylda MiddleBox komponentini yaradaq:

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

Ve onu boyuk qutunun BigBox icine qoyaq:

import MiddleBox from './MiddleBox';

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

Eyni seyleri kicik qutucuq SmallBox ucun de edek:

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

Iki belə qutucugu MiddleBox -in icine yerlesdirek:

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

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

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

useContext vasitesile kontekstin qiymetini name deyisenine oxuyaq:

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

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

Bos komponentde App Parent komponentini yaradin, onun da icinde Daughter komponentini, Daughter -in icinde isə Grandson komponentini yaradin. Kontekstden istifade ederek, App -den 42 yas qiymetini oturun, useContext vasitesile ise onu Daughter komponentinde cap edin.

Indi ise Grandson komponentinde yas qiymetini, 2 -ye bolunmus sekilde cap edin.