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

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

අපට Block නම් React අංගයක් ඇතැයි සිතමු සහ අපි එහි Styled Components භාවිතයෙන් විලාසිත කරන ලද අංග Input සහ Container සාදා ඇත:

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

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

අපි Container තුළ Input අංග තුනක් තබමු:

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

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

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

හිස් React අංගයක් Block සාදන්න, එහි බොත්තම් තුනක් ඇති div කොටසක් සාදන්න. Styled Components පුස්තකාලය භාවිතයෙන්, මෙම div කොටස සහ බොත්තම් විලාසිත කරන්න. Props භාවිතා කරමින්, පළමු බොත්තම අක්‍රීය කරන්න, සහ තුන්වන බොත්තමේ වර්ගය reset කරන්න.