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

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

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

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

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

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

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

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

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