React တွင် useContext ဟူသော အသုံးပြုခြင်း

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် context နှင့်အလုပ်လုပ်ဆောင်ခြင်းကို ဆက်လက်ပြုလုပ်သွားမည်။ ယခုအခါ component များ၏သစ်ပင် (tree) တစ်ခုကိုတည်ဆောက်ပါမည်။ စတင်ရန် သီးခြားဖိုင်တွင် React component BigBox ကိုဖန်တီးပါမည်။

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

၎င်းကို import လုပ်ပြီး ကျွန်ုပ်တို့၏ အဓိက component App အတွင်း၌ ထားရှိပါမည်။

import BigBox from './BigBox';

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

ပိုမိုရှင်းလင်းစေရန် style အနည်းငယ်ထည့်သွင်းပါမည်။ ဤအတွက် ဖိုင် styles.css ကိုဖန်တီးပါမည်။

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

၎င်းကို App.js အတွင်းသို့ import လုပ်ရန် မမေ့ပါနှင့်။

import './styles.css';

ယခု သီးခြားဖိုင်တွင် component 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 :)' ဆိုသည့် တန်ဖိုးကို props များကိုအသုံးမပြုဘဲ context ကိုအသုံးပြု၍ ပေးပို့လိုသည် (ကျွန်ုပ်တို့၏ ဘူးလုပ်ငန်းသည် ကြီးမားသောအရွယ်အစားသို့ ကြီးထွားလာခြင်း ဖြစ်နိုင်သည်ဟု ဆိုပါစို့)။

context ဖိုင် MyContext.js ကို ကျွန်ုပ်တို့သည် ယခင်သင်ခန်းစာတွင် ဖန်တီးပြီး ချိတ်ဆက်ပြီးဖြစ်သည်။

ကျွန်ုပ်တို့လုပ်ဆောင်မည့် နောက်တစ်ဆင့်မှာ BigBox ကို ကျွန်ုပ်တို့၏ context object MyContext ၏ property ဖြစ်သော context provider ဖြင့် ထည့်သွင်းပါမည်။ ယခုအခါ ဤတည်ဆောက်မှုအတွင်း၌ ထားရှိသော component အားလုံး (၎င်းတို့သည် BigBox အတွင်း၌ ထည့်သွင်းထားသော ဘူးများအားလုံးလည်းဖြစ်သည်) သည် context ကို ရယူခွင့်ရရှိပြီး context ၏ပြောင်းလဲမှုများကို စောင့်ကြည့်နိုင်မည်ဖြစ်သည်။ context ၏တန်ဖိုးအဖြစ် ကျွန်ုပ်တို့လိုချင်သော 'small box :)' ကို ပေးပို့ပါမည်။

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

ကျန်ရှိသည်မှာ context ၏တန်ဖိုးကို ဖတ်ရှုရန်ဖြစ်သည်။ ကျွန်ုပ်တို့သည် ၎င်းကို SmallBox တွင်အသုံးပြုလိုသည်၊ ဆိုလိုသည်မှာ context ဖိုင် MyContext.js နှင့် hook useContext ကို import လုပ်ရန်ဖြစ်သည်။

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

useContext ကိုအသုံးပြု၍ context ၏တန်ဖိုးကို variable name အတွင်းသို့ ဖတ်ရှုပါမည်။

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

ကျွန်ုပ်တို့သည် SmallBox ကို ဤ context သို့ စာရင်းသွင်းပြီး ၎င်းပြောင်းလဲပါက ဤ component သည်လည်း အသစ်ပြန်လည်ပြုပြင်သွားမည်ဖြစ်သည်။

နောက်ဆုံးအနေဖြင့်၊ variable name ၏တန်ဖိုးကို ဒေါက်လိုက်အစက် (ellipsis) အစား ထည့်သွင်းပါမည်။

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

အလွတ် component App အတွင်း၌ component Parent ကိုဖန်တီးပါ၊ ၎င်းအတွင်း component Daughter ကိုဖန်တီးပါ၊ Daughter အတွင်း component Grandson ကိုဖန်တီးပါ။ Context ကိုအသုံးပြု၍ App မှ အသက်42 ၏တန်ဖိုးကို ပေးပို့ပါ၊ ထို့နောက် useContext ကိုအသုံးပြု၍ ၎င်းကို component Daughter အတွင်း၌ ပြသပါ။

ယခု component Grandson အတွင်း၌ အသက်၏တန်ဖိုးကို ပြသပါ၊ သို့သော် 2 ဖြင့်စားထားသော တန်ဖိုးကို ပြသပါ။