React-daky useContext kontekst gөç

Bu sapakda biz kontekst bilen işlemegi dowam edaris. Indi komponentleriň agajyny gurarys. Başlangyç üçin aýratyn faýlda React komponenty BigBox dörediň:

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

Ony import edeliň we baş komponentimiz App-de ýerleşdiriň:

import BigBox from './BigBox';

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

Daha aýdyňlyk üçin birneme stil bereliň diwlere. Bunuň üçin styles.css faýlyny dörediň:

div {
	border: 1px solid blue;
	margin: 10px;
	text-align: center;
	max-width: 300px;
}

Ony import etmegi ýatdan çykarmaň App.js-e:

import './styles.css';

Indi aýratyn faýlda MiddleBox komponenty dörediň:

function MiddleBox() {
	return (
		<p>middlebox</p>
	);
}

We ony uly gutuja BigBox goýuň:

import MiddleBox from './MiddleBox';

function BigBox() {
	return (
		<div>
			<MiddleBox />
		</div>
	);
}

Kiçijik gutujyk bilen hem SmallBox şol bir işi edeliň:

function SmallBox() {
	return (
		<p>Men ... </p>
	);
}

Ondan iki sany şeýle gutujygy MiddleBox-de ýerleşdiriň:

import SmallBox from './SmallBox';

function MiddleBox() {
	return (
		<div>
			<SmallBox />
			<SmallBox />
		</div>
	);
}

Agajy gurduk. Indi bolsa biz App-den, meselem, SmallBox-e setir bahasyny 'small box :)' geçirmek isleýäris, propssyz, kontekst ulanyp (gutar-da gutulygyňyz programmamyz uly ölçegli bolup biler).

Kontekst faýly MyContext.js biz öňki sapakda döredip we birikdirdik.

Indiki ädim, edjek zadymyz - BigBox-i kontekstiň provaydery bilen gapdalaýarys, käbir kontekst obýektimiziň MyContext aýratynlygy. Indi bu gurluşda ýerleşen ähli komponentler (bu hem BigBox içine goýlan ähli gutulyklar) kontekste giriş alar we onyň üýtgeşikliklerine ýazylar. Kontekstiň bahasy hökmünde islenen 'small box :)' geçirýäris:

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
		</MyContext.Provider>
	);
}

Indi galýan zadymyz kontekstiň bahasyny okamak. Biz ony SmallBox-de ulanmak isledik, şonuň üçin ol ýere kontekst faýlyny MyContext.js we gөç-i useContext import edeliň:

import { useContext } from 'react';
import { MyContext } from './MyContext.js';

useContext kömegi bilen kontekstiň bahasyny name üýtgeýjisine okaýarys:

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

Biz SmallBox-i bu kontekste ýazdyrdyk we, eger ol üýtgese, bu komponent hem täzelenjek.

We, ahyrynda, üýtgeýjiniň bahasyny name köçeltme nyrhlarynyň ýerine goýýarys:

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

Boş komponentde App dörediň komponent Parent, we onda komponent Daughter, we Daughter komponentde Grandson. Konteksti ulanmak, App-den bahany geçiriň ýaşy 42, we useContext kömegi bilen ony Daughter komponentde görkeziň.

Indi bolsa Grandson komponentde ýaşyň bahasyny görkeziň, ýöne 2-e bölünen.