Styled Components bilan Reactda Prop-lardan Foydalanish

Oldingi darsdan biz bilib oldikki, Styled Components kutubxonasi yordamida stilizatsiya qilingan komponentlarni oddiy React komponentlari sifatida ishlatish mumkin. Ushbu darsda biz bu yerda ham prop-larning shu tarzda ishlashini ko'ramiz.

Faraz qilaylik, bizda Block React komponenti bor va biz unda Styled Components yordamida stilizatsiya qilingan Input va Container komponentlarini yaratdik:

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

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

Keling, uchta Input komponentini Container ichiga joylashtiramiz:

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

Prop-lardan foydalanib, biz komponentlarda turli xil atributlarni o'rnatishimiz mumkin. Keling, ikkinchi inputga placeholder va type atributlarini mos ravishda name va text qiymatlari bilan, uchinchi inputga esa type atributiga password qiymatini o'rnatamiz:

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