Props in Functional Component

ကဲ လေ့လာလိုက်ကြရအောင် အရင်ဆုံး သူက ဘယ်လိုအလုပ်လုပ်တာလည်းကိုမလေ့လာသေးခင်မှာ

Props ဆိုတာ ဘာလည်းဆိုတာကို ကြည့်လိုက်ရအောင်

ကျတော်တို့ က props လို့ပြောနေပေမယ့် သူ့ကို property သိထားရပါမယ်ဘာလို့လည်းဆိုတော့

ကျတော်တို့ က component တခုကိုရေးတဲ့အခါမှာ <Component />အဲလိုမျိုးရေးကြတယ်မလား

သူတို့ရဲ့ အထဲမှာ HTML လိုမျိုး ကြည့်လိုက်ရင် attribute လိုမျိုးရေးပေးတဲ့ဟာကို props ( properties )

လို့ပြောကြပါတယ်

သူက ဘယ်လိုမျိုး အလုပ်လုပ်တာလည်းဆိုတော့ parent ကနေပြီးတော့ child ဆီကို ဒေတာ တွေ

passing လုပ်ပေးပါတယ်

တချို့တွေက react ရဲ့ data flow တွေကို ဘယ်လိုတင်စားကြတာလည်းဆိုတော့ waterfall လို့ တင်စားကြပါတယ်

ဘာလို့ဆိုတော့ react ရဲ့ data passing က parent to child ပဲအလုပ်လုပ်ပေးတာမလို့ပါ

Child ကနေပီးတော့ parent ဆီကို ပြန်မသွားပါဘူး

အဲလိုမျိုး ဆိုတော့ ကျတော်တို့ က ဘယ်လိုမျိုး ရေးကြရမလဲဆိုတော့ တချက်လောက်ကြည့်လိုက်ကြရအောင်ဗျ

အရင်ဆုံး ကျတော်တို့ ကုဒ်လေးတွေကို ဒီလိုလေးရေးလိုက်ပါမယ်

function App () {
    return(
        <Child />
    )
}
export default App

function Child () {
    return(
        <h1>Hello</h1>
    )
}
export default Child

ဒီလိုလေးရေးပြီးတော့ ကျတော်တို့ parent ကနေပြီးတော့ ဘယ်လိုမျိုး data တွေပေးလို့ရလည်းဆိုတော့

Html tag တွေမှာ attribute ရေးသလိုမျိုးရေးလိုက်မှာပါ

အဲအချိန်မှာ ကျတော်တို့က ဘယ်လိုမျိုး ရေးမှာလည်းဆို‌တော့ ကြိုက်တဲ့ naming system အနေနဲ့ ပေးလို့ရပါတယ်

ကျတော်က တော့ အလွယ်လေး ရေးပြီးတော့ပေးလိုက်ပါမယ်

name=”Bate Thar” အဲလိုလေးရေးပြီးတော့ data pass လုပ်လိုက်ပါမယ်

function App () {
    return(
        <Child name="Bate Thar" />
    )
}

အဲလိုလေး ပေးလိုက်ပြီးတော့ ကျတော်တို့က child component မှာ ဘယ်လိုမျိုး ပြန်ပြီးတော့ အသုံးပြုရမှာလည်းဆို

တော့ ကျတော်တို့က functional component တွေ အနေနဲ့ ရေးထားတော့ function parameter

တွေလက်ခံတဲ့နေရာ ဖြစ်တဲ့ parenthesis ကနေပီးတော့ လက်ခံလိုက်လို့ရပါတယ်

ဘယ်လိုမျိုးလက်ခံလို့ရလည်းဆိုတော့

props လို့ရေးပြီးတော့လက်ခံလို့ရပါတယ်

တခြား name တွေ နဲ့ လက်ခံလို့ရပါတယ် တော်တော်များများကတော့ props လို့တော့ရေးကြပါတယ်

အဲလိုမျိုးရေးပြီးတော့ ကျတော်တို့ component ထဲမှာ console.log ထုတ်ကြည့်လိုက်ရင်

data pass ပီးတော့ရောက်လာတဲ့ data က object type လိုမျိုး ရောက်လာတာကိုမြင်ရမှာပါ

function Child (props){
    console.log(props)
    return(
        <h1>Hello</h1>
    )
}
export default Child

console.log

ဒီလိုလေး ကျတော်တို့က props တခုက data က ဘယ်လိုမျိုးရောက်လာတာလည်းကို မြင်သာသွားမယ်လို့ထင်ပါတယ်

သူ့ကို ကျတော်တို့ ပြန်သုံးချင်တဲ့အခါကျရင် ဘယ်လိုမျိုး အသုံးပြုရမလဲဆိုတော့ ကျတော်တို့ h1 tag ထဲမှာ

object.key လို့ရေးပြီးတော့ခေါ်လိုက်မယ်ဆိုရင်တော့ ကျတော်တို့ အဖြေ ထွက်လာပါလိမ့်မယ်

အဲမှာ ကျတော်တို့တစ်ခု သတိထားရမှာက ဒီအတိုင်း object.key ကို သွားခေါ်လိုက်ရင် ဘယ်လိုမျိုးပြမှာလည်းဆိုတော့

သူက objet.key ဆိုတဲ့စာအတိုင်းပေါ်နေပါလိမ့်မယ် ပုံလေးကို တချက်ကြည့်လိုက်ရင်ပိုပြီးတော့မြင်သာသွားပါလိမ့်မယ်

function Child (props) {
    console.log(props)
    return(
        <h1>props.name</h1>
    )
}
export default Child

result

ဘာလို့အဲလိုမျိုး ထွက်တာလည်းဆိုတော့ ကျတော်တို့က jsx တွေ နဲ့ရေးတာဖြစ်တဲ့အတွက် သူ့အထဲမှာက

ကျတော်တို့က javascript expression တွေ တခုခု အသုံးချချင်တဲ့အခါ curly bracket တွေအသုံးပြုပေးရပါတယ်

မြင်သာအောင် ပြရရင် ကျတော်တို့ 1+2 ကို ဒီအတိုင်း လေးရေးကြလိုက်ရအောင်

function Child(props) {
    console.log(props)
    return(
        <h1>1+2</h1>
    )
}
export default Child

အဲဒါကို ကျတော်တို့ result မှာသွားကြည့်လိုက်ရင် ဒီလိုလေး မြင်ရပါလိမ့်မယ်

result

ဒီလိုလေး ထွက်လာပါလိမ့်မယ် ဘာလို့ အဲလိုထွက်ရတာလည်းဆိုတော့ ကျတော်တို့က jsx tag နှစ်ခုကြားမှာက

သူတို့က template literals ( back tips ) အဲလိုလေး တွေနဲ့လက်ခံပေးတာမလို့ပါ တစ်နည်းပြောရရင်

string data ကိုပဲ သူတို့ကလက်ခံပေးထားတာပါ

အဲဒါကို ကျတော်တို့က javascript expression ( calculation / execution ) တွေ

အသုံးပြုလာချင်တဲ့အခါကျရင် curly bracket ( တွန့်ကွင်း ) လေးကို အသုံးပြုပေးရတာပါ

function Child(props){
    console.log(props)
    return(
        <h1>{1+2}</h1>
    )
}
export default Child

browser result

အဲဒီတော့ ကျတော်တို့က props ကိုပြန်ခေါ်ချင်ရင် ဘယ်လိုမျိုးခေါ်ရမှာလည်းဆိုတာကို မြင်သာမယ်လို့ထင်ပါတယ်

အဲဒီတော့ကျတော်တို့ ကုဒ်ကို နည်းနည်းလေး ပြင်လိုက်ပါမယ်

function Child(props) {
    console.log(props)
    return(
        <h1>{props.name}</h1>
    )
}
export default Child 

browser result

ကျတော်တို့ props တွေကို ဒီလောက်ဆိုရင် တော်တော်လေး နားလည်သွားလောက်မယ်လို့ထင်ပါတယ်

ကျတော်တို့က props တွေကိုအသုံးပြုပြီးတော့ component တွေဆီကို data တွေ passing လုပ်ရင်းနဲ့

reusable component တွေ ဖန်တီးပြီးတော့ ကျတော်တို့ရဲ့အချိန်တွေကို သက်သာအောင်လုပ်လို့ရသွားပါတယ်

props ကနေပြီးတော့ ကျွန်တော်တို့ data တွေကို string အနေနဲ့ပဲ ပို့လို့ရတာ မဟုတ်ပါဘူး js data type

တွေအကုန်လုံးကို ပို့ပေးလို့ရပါတယ်

Object

Array

Function

Number တွေ အစရှိတဲ့ data တွေကိုအကုန်လုံးကို props ကနေပြီးတော့ data passing လုပ်ပြီးတော့

component တွေ ကို အသုံးချလို့ရပါတယ်

ကျတော်တို့ Props တွေ က Object type ဖြစ်တော့ ကျတော်တို့ က props တွေကိုလည်း destructuring

လုပ်ပြီးတော့ အသုံးချလို့ရပါသေးတယ်

ဘယ်လိုမျိုး လည်းဆိုတော့ ကျတော်တို့က props အစား object destructuring ရေးပြီးတော့အသုံးချလို့ရပါတယ်

function Child ({name}) {
    return (
        <h1>{name}</h1>
    )
}
export default Child

ဒီလိုလေးရေးမယ်ဆိုရင်လည်းရပါတယ်