Children Props

ကျတော်တို့ ဆက်လေ့လာသွားကြမှာက ဘာလည်းဆိုတော့ ကျတော်တို့props တွေထဲမှာ attribute

အနေနဲ့ပေးလို့ရသလို html tag ( component ) တခုလုံးကိုလည်းပေးလို့ရပါတယ် တချို့အခြေအနေတွေမှာ

ကျတော်တို့က props တွေကို children အနေနဲ့ passing လုပ်ပြီးတော့ ရေးကြရတာမျိုးတွေရှိပါတယ်

နောက်ပိုင်းကျတော် ရှင်းပြတဲ့အခါကျရင် မြင်လာပါလိမ့်မယ်

သူ့ကို က ကျတော့ ကျတော်တို့က ဘယ်လိုမျိုး passing ပေးကြတာလည်းဆိုတော့ enclosing tag

ထဲမှာ ရေးပြီးတော့ data passing လုပ်ကြပါတယ်

ဘယ်လိုမျိုးလည်းဆိုတော့ အရင်ဆုံး ကျတော်တို့ component တခုကိုတည်ဆောက်လိုက်ပါမယ်

import React from 'react'

function ChildProps(props) {
  return (
    <div>
      {props.children}
    </div>
  )
}

export default ChildProps

ကျတော်တို့ props ကို လက်ခံပြီးတော့ အဲ props ရဲ့ children အနေနဲ့ ကျတော်တို့က ပြန်ပြီးတော့

render လုပ်ထားလိုက်ပါတယ်

သူ့ကို ကျတော်တို့က app.jsx (app component) ထဲမှာ ဒီလိုလေး သွားရေးလိုက်ပါမယ်

ဒီနေရာမှာ တခုသတိထားမှာက ကျတော်တို့အရင်ကလိုမျိုး attribute အနေနဲ့ သွားတာမျိုးမဟုတ်တော့ဘဲနဲ့

သူ့ရဲ့ အထဲမှာ html tag ရဲ့အထဲမှာစာရေးသလိုမျိုး ရေးပြီးတော့ သွားပါတယ်

<ChildProps>
    Hello
    <p>Hello</p>
</ChildProps>

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

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