React တွင် Styled Components များဖြင့် Props များအသုံးပြုခြင်း

ယခင်သင်ခန်းစာမှ ကျွန်ုပ်တို့သိထားသည်မှာ Styled Components စာကြည့်တိုက်ကို အသုံးပြု၍ စတိုင်ထည့်ထားသော component များကို ရိုးရိုး React component များကဲ့သို့ အသုံးပြုနိုင်သည်။ ဤသင်ခန်းစာတွင် props များသည်လည်း ဤနေရာတွင် ထိုနည်းတူ အလုပ်လုပ်သည်ကို မြင်တွေ့ရမည်။

ကျွန်ုပ်တို့တွင် React component တစ်ခုဖြစ်သော Block ရှိပြီး ၎င်းအတွင်း Styled Components ကို အသုံးပြု၍ စတိုင်ထည့်ထားသော component များ Input နှင့် Container ကို ဖန်တီးထားသည်ဟု ယူဆပါစို့။

const Container = styled.div`
	display: flex;
	flex-direction: column;
	width: 150px;
`;

const Input = styled.input`
	margin: 5px;
	font-size: 18px;
`;

Input component သုံးခုကို Container အတွင်း ထားလိုက်ပါမည်။

function Block() {
	return (
		<Container>
			<Input />
			<Input />
			<Input />
		</Container>
	);
}

Props များကို အသုံးပြု၍ component များတွင် attribute များကို အမျိုးမျိုးသတ်မှတ်နိုင်သည်။ ဒုတိယ input တွင် placeholder နှင့် type attribute များကို တန်ဖိုး name နှင့် text အသီးသီးဖြင့် သတ်မှတ်ပါမည်။ တတိယ input ၏ type attribute ကို တန်ဖိုး password ဖြင့် သတ်မှတ်ပါမည်။

function Block() {
	return (
		<Container>
			<Input />
			<Input placeholder="name" type="text" />
			<Input type="password" />
		</Container>
	);
}

အလွတ် React component Block တစ်ခုဖန်တီးပါ၊ ၎င်းအတွင်း button သုံးခုပါသော div တစ်ခုလုပ်ပါ။ Styled Components စာကြည့်တိုက်ကို အသုံးပြု၍ ထို div နှင့် button များကို စတိုင်ထည့်ပါ။ Props များကို အသုံးပြု၍ ပထမခလုတ်ကို ပိတ်ပါ၊ တတိယခလုတ်ကို အမျိုးအစား reset လုပ်ပါ။