Styled Components менен Reactте Пропс колдонуу

Өткөн сабактан биз билдик, Styled Components китепканасы менен стилдештирилген компоненттерди кадимки React компоненттери сыяктуу колдонсо болот. Бул сабакта биз бул жерде ушул сыяктуу эле пропстордун иштешин көрөбүз.

Бизде React компоненти Block бар деп коёлу жана анын ичинде Styled Components жардамы менен стилдештирилген компоненттерди Input жана Container түздүк:

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

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

Containerтин ичине үч Input компонентин жайгаштыралы:

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

Пропс колдонуу менен, биз компоненттерге ар кандай атрибуттарды белгилей алабыз. Экинчи инпутка placeholder жана type атрибуттарын маанилери менен name жана text, тиешелүүлүгүнө жараша, ал эми үчүнчү инпуттун type атрибутуна password маанисин берели:

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