Styled Components සමග React හි කොන්දේසි සහිත රෙන්ඩරිං වලදී props භාවිතා කිරීම

කොන්දේසි සහිත රෙන්ඩරිං සඳහාද props භාවිතා කළ හැකිය. අපි පසුගය පාඩමේදී වැඩ කළ React කොම්පෝනන්ටය Block ගන්නෙමු.

පළමු ඉන්පුට් සඳහා පසුබිම කහ පාට වන අතර අනෙක් ඉන්පුට් සඳහා කොළ පාට වන පරිදි සකස් කරමු. මෙය සඳහා, කොම්පෝනන්ටය සඳහා වන විලාසයන්ට Input තවත් රේඛාවක් එකතු කරමු:

Block.jsconst Input = styled.input`
  background: ${(props) => (props.first ? 'yellow' : 'green')};

  margin: 5px;
  font-size: 18px;
`;

පළමු ඉන්පුට් සඳහා first prop එකතු කරමු:

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>