Styled Components bilan Reactda Prop-lardan Foydalanish

Oldingi darsdan biz bilib oldikki, Styled Components kutubxonasi yordamida stilizatsiya qilingan komponentlarni oddiy React komponentlari sifatida ishlatish mumkin. Ushbu darsda biz bu yerda ham prop-larning shu tarzda ishlashini ko'ramiz.

Faraz qilaylik, bizda Block React komponenti bor va biz unda Styled Components yordamida stilizatsiya qilingan Input va Container komponentlarini yaratdik:

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

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

Keling, uchta Input komponentini Container ichiga joylashtiramiz:

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

Prop-lardan foydalanib, biz komponentlarda turli xil atributlarni o'rnatishimiz mumkin. Keling, ikkinchi inputga placeholder va type atributlarini mos ravishda name va text qiymatlari bilan, uchinchi inputga esa type atributiga password qiymatini o'rnatamiz:

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

Bo'sh Block React komponentini yarating, uning ichida uchta tugma bo'lgan div yarating. Styled Components kutubyonasidan foydalanib, ushbu div va tugmalarni stilizatsiya qiling. Prop-lardan foydalanib, birinchi tugmani bloklang, uchinchi tugma turini esa reset qiling.