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

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

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

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

App.jsximport BigBox from './BigBox';

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

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

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

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

App.jsximport './styles.css';

ယခု သီးခြားဖိုင်တွင် component MiddleBox ကိုဖန်တီးပါမည်။

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

ထို့နောက် ၎င်းကို ဘူးကြီး BigBox အတွင်း၌ ထည့်သွင်းပါမည်။

BigBox.jsximport MiddleBox from './MiddleBox';

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

ဘူးသေး SmallBox အတွက်လည်း အလားတူအရာအားလုံးကို လုပ်ဆောင်ပါမည်။

SmallBox.jsxfunction SmallBox() {
  return (
    <p>I am ... </p>
  );
}

ထိုသို့သော ဘူးသေး နှစ်ခုကို MiddleBox အတွင်း၌ ထားရှိပါမည်။

MiddleBox.jsximport 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 :)' ကို ပေးပို့ပါမည်။

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

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

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

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

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

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

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

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