Истифодаи пропсҳо бо 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;
`;

Се компоненти Input-ро дар Container ҷойгир мекунем:

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

Бо истифода аз пропсҳо, мо метавонем дар компонентҳо сифатҳои (attribute) гуногун муқаррар кунем. Биёед ба вурудии дуюм сифатҳои placeholder ва type бо қиматҳои name ва text, мутаносибан муқаррар кунем, ва ба вурудии сеюм дар сифати type қимати password-ро муқаррар кунем:

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