React တွင် Component Props များ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

အလုပ်သမားတစ်ဦး၏ အချက်အလက်များကို စကရင်ပေါ်တွင်ဖော်ပြသည့် Employee component တစ်ခုလုပ်ပါ။ ဤအချက်အလက်များသည် နာမည်၊ မိသားစုအမည်၊ အလယ်အမည်နှင့် လစာဖြစ်ပါစေ။ �အချက်အလက်များကို သင့်လိုအပ်သော markup ဖြင့် ပုံဖော်ပါ။ App component အတွင်း၌ ကွဲပြားသောအချက်အလက်များရှိသည့် အလုပ်သမားသုံးဦးကို ဖော်ပြပါ။