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>Мен ... </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>Мен ... </p>
		</div>
	);
}

Біз SmallBox-ті осы контекстке жазылдық және егер ол өзгерсе, бұл компонент де жаңартылады.

Соңында, үш нүктенің орнына name айнымалысының мәнін қоямыз:

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

Бос App компонентінде Parent компонентін жасаңыз, онда Daughter компоненті, ал Daughter-те Grandson компоненті болсын. Контекстті қолданып, App-тен 42 жасының мәнін жіберіп, useContext көмегімен оны Daughter компонентінде шығарыңыз.

Енді Grandson компонентінде жас мәнін шығарыңыз, бірақ 2-ге бөлінген.