Styled Components နှင့် React တွင် အခြေအနေအလိုက် ရေးဆွဲခြင်းအတွက် Props များကို အသုံးပြုခြင်း

Props များကို အခြေအနေအလိုက် ရေးဆွဲခြင်း (conditional rendering) အတွက်လည်း အသုံးပြုနိုင်ပါသည်။ ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့လုပ်ဆောင်ခဲ့သည့် React component Block ကို ယူကြည့်ပါမည်။

ပထမ input အတွက် နောက်ခံအရောင်သည် အဝါရောင် ဖြစ်ပြီး အခြား input များအတွက် အစိမ်းရောင် ဖြစ်အောင် လုပ်ကြည့်ပါမည်။ ဤအတွက်၊ component Input အတွက် စတိုင်များထဲတွင် လိုင်းတစ်ခု ထပ်မံထည့်ပါက အောက်ပါအတိုင်းရပါမည်။

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

ပထမ input သို့ prop first ကို ထည့်ပါမည်။

<Container>
	<Input first />
	<Input placeholder="name" type="text" />
	<Input type="password" />
</Container>

သင်ခန်းစာတွင် ပေးထားသော အခြေအနေအလိုက် ရေးဆွဲခြင်း သဘောတရားကို အသုံးပြု၍၊ ယခင်သင်ခန်းစာ၏ တာဝန်ဖြေရှင်းချက်ကုဒ်ကို ပြုပြင်မွမ်းမံပါ။ Prop warn ရှိပါက ခလုတ်၏စာသားသည် အနီရောင် ဖြစ်ပြီး ၎င်း၏နောက်ခံအရောင်သည် အဝါရောင် ဖြစ်ရပါမည်။ ယင်းမရှိပါက အစိမ်းရောင် နောက်ခံနှင့် အဖြူရောင် စာသား ဖြစ်ရပါမည်။ warn ကို ဒုတိယခလုတ်သို့ ပေးပို့ပါ။