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

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

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

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

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

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

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

පාඩම් න්‍යායේ දක්වා ඇති කොන්දේසි සහිත රෙන්ඩරිං භාවිතා කරමින්, කලින් පාඩම සඳහා වූ ගැටලුවේ විසඳුමේ කේතය වෙනස් කරන්න එවිට warn prop ඇති විට බොත්තමේ ලෙඛනය රතු පාට වන අතර එහි පසුබිම කහ පාට වේ, නැතිනම් - කොළ පසුබිම සහ සුදු ලෙඛනය වේ. warn දෙවන බොත්තමට යොමු කරන්න.