React တွင် Component Props များ

ယခင်သင်ခန်းစာတွင် ထုတ်ကုန်များ၏ နမူနာအချို့ကို ဖော်ပြခဲ့သည်:

jsxfunction App() {
  return <div>
    <Product />
    <Product />
    <Product />
  </div>;
}

လောလောဆယ်တွင် ထုတ်ကုန်တဂ်ခုစီခေါ်ဆိုမှုတိုင်းသည် အတူတူပင်ဖော်ပြသည်။ ယခု ထုတ်ကုန်တစ်ခုစီကို ထူးခြားအောင်လုပ်ကြပါစို့။

ဥပမာအားဖြင့်၊ ထုတ်ကုန်တစ်ခုစီတွင် အမည်နှင့် စျေးနှုန်းရှိရမည်ဆိုပါစို့။ ထုတ်ကုန်တဂ်ခုစီခေါ်ဆိုမှုသည် ၎င်း၏ကိုယ်ပိုင်အမည်နှင့် စျေးနှုန်းဖြင့် လိုအပ်သော markup ဖြင့် ထုတ်ကုန်တစ်ခုကို ဖော်ပြရန် လုပ်ဆောင်ကြပါစို့။

ဤသို့လုပ်ဆောင်ရန် အဆင့်အနည်းငယ်လိုအပ်သည်။

အစပိုင်းတွင်၊ ထုတ်ကုန်တဂ်ကိုခေါ်ဆိုသည့်အခါ ထိုတဂ်ထဲတွင် အမည်ကြိုးကွင်းနှစ်ခုရေးသားပါမည်: ထုတ်ကုန်အမည်ပါသော name ကြိုးကွင်းနှင့် စျေးနှုန်းပါသော cost ကြိုးကွင်း၊ ဤကဲ့သို့:

jsxfunction App() {
  return <div>
    <Product name="product1" cost="100" />
    <Product name="product2" cost="200" />
    <Product name="product3" cost="300" />
  </div>;
}

ဤကြိုးကွင်းများ၏ အမည်များနှင့် တန်ဖိုးများသည် ကျွန်ုပ်တို့၏ component Product ၏ function constructor ပထမပါရာမီတာအတွင်းသို့ object အဖြစ်ရောက်ရှိသွားမည်:

jsxfunction Product(props) {
  console.log(props); // name နှင့် cost key များပါသော object
  
  return <p>
    product
  </p>;
}

ပါရာမီတာအမည်သည် မည်သည့်အရာမဆိုဖြစ်နိုင်သော်လည်း React တွင် ၎င်းကို props ဟုခေါ်ဆိုလေ့ရှိသည်။ အမှန်တကယ်တွင် ဤသည်မှာ ပါရာမီတာအမည်တစ်ခုတည်းသာမဟုတ်ဘဲ React ၏ အရေးကြီးသော concept တစ်ခုဖြစ်သည်။

ဤ concept ၏ အဓိကအချက်မှာ: component တဂ်တစ်ခုကိုခေါ်ဆိုသည့်အခါ ထိုတဂ်ထဲသို့ အချက်အလက်များပါသော ကြိုးကွင်းများရေးသွင်းနိုင်သည်။ ဤအချက်အလက်များသည် component ၏ props များထဲသို့ရောက်ရှိသွားမည်။ ထို့နောက် component သည် ဤအချက်အလက်များကို အသုံးပြုနိုင်သည်၊ ဥပမာ၊ လိုအပ်သော markup ဖန်တီးရန်အတွက်။

ဤသို့လုပ်ဆောင်ကြပါစို့:

jsxfunction Product(props) {
  return <p>
    name: <span>{props.name}</span>,
    cost: <span>{props.cost}</span>
  </p>;
}

ပိုမိုအဆင်ပြေပြီး ပိုမိုလက်ခံထားသည်မှာ props object ကို အသုံးမပြုဘဲ၊ function ၏ ပါရာမီတာများအတွင်းမှာပင် destructuring ကို ချက်ချင်းလုပ်ဆောင်ခြင်းဖြစ်သည်:

jsxfunction Product({ name, cost }) {
  return <p>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </p>;
}