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ге бөлүнгөн.