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

Дар ин дарс мо кор бо контекстро идома медиҳем. Ҳозир дарахти компонентҳоро месозем. Барои оғоз дар як файли ҷудогона компоненти 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.