React တွင် Context အချက်အလက် အသစ်ပြန်လည်ထည့်သွင်းခြင်း

ဤသင်ခန်းစာတွင် context ၏တန်ဖိုးပြောင်းလဲသွားသောအခါ component များကို အသစ်ပြန်လည်ထည့်သွင်းခြင်းကို လေ့လာကြမည်။ Context သည် ပြောင်းလဲသွားနိုင်သည်ဟု သင်လိုလားပါက စဉ်းစားပါ။

ဤသို့သောအခြေအနေတွင် context ကို state များနှင့် တွဲဖက်၍ အသုံးပြုခြင်းသည် အသုံးဝင်သည်။ ယခင် သင်ခန်းစာတွင် ကျွန်ုပ်တို့ပြုလုပ်ခဲ့သော သေတ္တာငယ်လေးများနှင့်ပတ်သက်သည့် ကျွန်ုပ်တို့၏ application အား အနည်းငယ်ပြုပြင်ပြီး ခလုတ်တစ်ခုကိုနှိပ်လိုက်သောအခါ ပေးပို့သည့်တန်ဖိုးသည် 'metal box :)' ဖြစ်လာစေရန် ပြုလုပ်ကြပါစို့။

ထို့ကြောင့် ကျွန်ုပ်တို့၏ App ဖိုင်ကို ယူပြီး BigBox ၏နောက်တွင် ခလုတ်တစ်ခုကို ရေးဆွဲကြမည်-

function App() {
	return (
		<MyContext.Provider value="small box :)">
			<BigBox />
			<button>ကလစ်နှိပ်ပါ</button>
		</MyContext.Provider>
	);
}

နောက်ထပ် useState hook ကို import လုပ်ပြီး name state တစ်ခုကို သတ်မှတ်ကြမည်၊ ၎င်း၏တန်ဖိုးသည် ခလုတ်ကိုနှိပ်သောအခါ ပြောင်းလဲသွားမည်ဖြစ်သည်။ ၎င်းအတွက် ကနဦးတန်ဖိုးအဖြစ် ကျွန်ုပ်တို့က context တန်ဖိုးအဖြစ် ချက်ချင်းပေးပို့ခဲ့သော တန်ဖိုးကို ထားပေးပါ၊ ဆိုလိုသည်မှာ 'small box :)' ဖြစ်သည်-

function App() {
	const [name, setName] = useState('small box :)');
}

ဤတစ်ကြိမ်တွင်မူ context အဖြစ် စာသားတစ်ကြောင်းကို မပို့တော့ဘဲ name state ကိုသာ ပေးပို့မည်-

<MyContext.Provider value={name}>
	<BigBox />
	<button>ကလစ်နှိပ်ပါ</button>
</MyContext.Provider>

နောက်ဆုံးအဆင့်အနေဖြင့် ကျွန်ုပ်တို့သည် ခလုတ်ပေါ်တွင် ကလစ်နှိပ်လိုက်သောအခါ ခေါ်ဆိုမည့် အစီအစဉ်တစ်ခုကို ရေးသားပြီး setName လုပ်ဆောင်ချက်ကို အသုံးပြု၍ state ၏တန်ဖိုးအသစ်ကို 'metal box :)' အဖြစ် သတ်မှတ်ပေးမည်။ ထို့နောက် ခလုတ်ကိုနှိပ်ပြီး ရလဒ်ကို စစ်ဆေးနိုင်သည်-

<button onClick={() => {
	setName('metal box :)');
}}>ကလစ်နှိပ်ပါ</button>

ယခင်သင်ခန်းစာအတွက် ပြဿနာများဖြေရှင်းရာတွင် သင်ဖန်တီးခဲ့သော application ကို အသုံးပြုပါ။ age state တစ်ခုကို သတ်မှတ်ပါ၊ ၎င်းကို နံပါတ်တစ်ခုအစား context ကိုအသုံးပြု၍ App မှ ပေးပို့မည်ဖြစ်ပြီး၊ ၎င်းအတွက် ကနဦးတန်ဖိုးအဖြစ် 50 ကို သတ်မှတ်ပါ။ App ရှိ Parent component ၏အောက်တွင် ခလုတ်တစ်ခုထည့်ပါ၊ ထိုခလုတ်ကို တစ်ကြိမ်နှိပ်တိုင်း age state ၏တန်ဖိုးသည် 2 စီ လျော့နည်းသွားမည်။