Styled Components менен Reactте Пропс колдонуу

Өткөн сабактан биз билдик, Styled Components китепканасы менен стилдештирилген компоненттерди кадимки React компоненттери сыяктуу колдонсо болот. Бул сабакта биз бул жерде ушул сыяктуу эле пропстордун иштешин көрөбүз.

Бизде React компоненти Block бар деп коёлу жана анын ичинде 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>
	);
}

Пропс колдонуу менен, биз компоненттерге ар кандай атрибуттарды белгилей алабыз. Экинчи инпутка placeholder жана type атрибуттарын маанилери менен name жана text, тиешелүүлүгүнө жараша, ал эми үчүнчү инпуттун type атрибутуна password маанисин берели:

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

Бош React компоненти Block түзүңүз, анын ичинде үч баскычы бар див жасаңыз. Styled Components китепканасын колдонуп, бул дивди жана баскычтарды стилдештириңиз. Пропс колдонуу менен, биринчи баскычты бөгөттөңүз, ал эми үчүнчүсүнүн тибин reset кылыңыз.