React-ի useContext կոնտեքստի հուքը

Այս դասում մենք կշարունակենք աշխատել կոնտեքստի հետ: Այժմ կկառուցենք կոմպոնենտների ծառ: Սկսելու համար առանձին ֆայլում կստեղծենք React կոմպոնենտ BigBox:

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

Եկեք այն իմպորտ անենք և տեղադրենք մեր գլխավոր App կոմպոնենտում:

import BigBox from './BigBox';

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

Ավելի պարզ դարձնելու համար եկեք մի փոքր ստիլիզացնենք div-երը: Դրա համար կստեղծենք 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>I am ... </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>I am ... </p>
		</div>
	);
}

Մենք բաժանորդագրեցինք SmallBox-ը այս կոնտեքստին և, եթե այն փոխվի, այս կոմպոնենտը նույնպես կթարմացվի:

Եվ, վերջապես, name փոփոխականի արժեքը եկեք տեղադրենք բազմակետերի փոխարեն:

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

Դատարկ App կոմպոնենտում ստեղծեք Parent կոմպոնենտը, նրա մեջ՝ Daughter կոմպոնենտը, իսկ Daughter-ի մեջ՝ Grandson կոմպոնենտը: Օգտագործելով կոնտեքստ, App-ից փոխանցեք տարիքի 42 արժեքը, իսկ useContext-ի օգնությամբ արտածեք այն Daughter կոմպոնենտում:

Իսկ այժմ Grandson կոմպոնենտում արտածեք տարիքի արժեքը, սակայն 2-ի բաժանված: