Истифодаи пропсҳо бо 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;
`;

Се компоненти Input-ро дар Container ҷойгир мекунем:

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

Бо истифода аз пропсҳо, мо метавонем дар компонентҳо сифатҳои (attribute) гуногун муқаррар кунем. Биёед ба вурудии дуюм сифатҳои 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 диҳед.