Gebruik van Props met Styled Components in React

Van die vorige les het ons geleer dat komponente gestileer met die Styled Components-biblioteek gebruik kan word soos gewone React- komponente. In hierdie les sal ons sien dat props op 'n soortgelyke manier hier sal werk.

Kom ons neem aan ons het 'n React-komponent Block en ons het daarin gestileerde komponente geskep met behulp van Styled Components: Input en Container:

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

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

Plaas drie Input-komponente in die Container:

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

Deur props te gebruik, kan ons verskillende attributes in komponente stel. Kom ons stel vir die tweede invoerveld die attributes placeholder en type met waardes name en text, onderskeidelik, en vir die derde invoerveld stel ons die attribute type se waarde na password:

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