კონტექსტის ჰუკი 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>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-ზე.