Kifaa cha useContext cha Context katika React

Katika somo hili tutaendelea kufanya kazi na context. Sasa tutajenga mti wa vijenzi. Kuanza, katika faili tofauti tuunde kijenzi cha React BigBox:

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

Tutaiagiza na kuiweka katika kijenzi chetu kikuu App:

import BigBox from './BigBox';

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

Kwa uwazi zaidi, tutaweka mitindo kidogo kwa divi. Kwa hili tutaunda faili styles.css:

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

Tusisahau kuiagiza katika App.js:

import './styles.css';

Sasa katika faili tofauti tuunde kijenzi MiddleBox:

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

Na tutaiweka kwenye sanduku kubwa BigBox:

import MiddleBox from './MiddleBox';

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

Tutafanya yaleyale kwa sanduku ndogo SmallBox:

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

Tutaweka sanduku ndogo mbili kama hizi katika MiddleBox:

import SmallBox from './SmallBox';

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

Tumejenga mti. Na sasa tungependa kutoka kwa App yetu kupitisha, tuseme, kwa SmallBox thamani ya mfuatano 'small box :)', bila kutumia props, bali kwa kutumia context (ikia programu yetu ya masanduku itaongezeka kwa ukubwa mkubwa).

Faili yenye context MyContext.js tumeunda na kuiunganisha tayari katika somo lilopita.

Hatua inayofuata, ambayo tutafanya - tutafunga BigBox kwenye mdau wa context, ambayo ni sifa ya kitu chetu cha context MyContext. Sasa vijenzi vyote, vilivyomo kwenye muundo huu (na hii ni pamoja na masanduku yote, yaliyomo kwenye BigBox) yataweza kupata ufikiaji na kujisajili kwa mabadiliko ya context. Kama thamani ya context tunapita inayotakiwa 'small box :)':

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

Na sasa inabaki kusoma thamani ya context. Tulitaka kuitumia katika SmallBox, kwa hivyo tutaagiza huko faili ya context MyContext.js na kifaa useContext:

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

Tutasoma kwa kutumia useContext thamani ya context kwenye kutofautisha name:

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

Tumejisajili SmallBox kwenye context huu na, ikiwa itabadilika, kijenzi hiki pia kitasasishwa.

Na, mwishowe, tunaweka thamani ya kutofautisha name badala ya dotsi tatu:

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

Katika kijenzi tupu App unda kijenzi Parent, na ndani yake kijenzi Daughter, na katika Daughter kijenzi Grandson. Kwa kutumia context, pitisha kutoka App thamani ya umri 42, na kwa kutumia useContext ionyeshe katika kijenzi Daughter.

Na sasa katika kijenzi Grandson onyesha thamani ya umri, lakini iliyogawanywa kwa 2.