React හි Styled Components සමඟ Props භාවිතා කිරීම

පසුගිය පාඩමෙන් අපි දැනගත්තේ Styled Components පුස්තකාලය භාවිතයෙන් විලාසිත කරන ලද අංග සාමාන්‍ය React අංග මෙන්ම භාවිතා කළ හැකි බවයි. මෙම පාඩමේදී අපි බලමු මෙහිදීත් ඒ හා සමානව props ද ක්‍රියා කරන බව.

අපට Block නම් React අංගයක් ඇතැයි සිතමු සහ අපි එහි 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>
  );
}

Props භාවිතා කරමින්, අපට අංගවලට විවිධ ගුණාංග සැකසිය හැකිය. අපි දෙවන ආදානයට ගුණාංග placeholder සහ type name සහ text අගයන් සමඟ පිළිවලින් සකසමු, තුන්වන ආදානය සඳහා ගුණාංගය type වෙත අගය password සකසමු:

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