Gebruik van Props met Styled Components in React

Van die vorige les het ons geleer dat komponente gestileer met die Styled Components-biblioteek gebruik kan word soos gewone React- komponente. In hierdie les sal ons sien dat props op 'n soortgelyke manier hier sal werk.

Kom ons neem aan ons het 'n React-komponent Block en ons het daarin gestileerde komponente geskep met behulp van Styled Components: Input en Container:

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

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

Plaas drie Input-komponente in die Container:

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

Deur props te gebruik, kan ons verskillende attributes in komponente stel. Kom ons stel vir die tweede invoerveld die attributes placeholder en type met waardes name en text, onderskeidelik, en vir die derde invoerveld stel ons die attribute type se waarde na password:

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

Skep 'n leë React-komponent Block, maak daarin 'n div met drie knoppies. Met behulp van die Styled Components-biblioteek, stileer hierdie div en die knoppies. Deur props te gebruik, deaktiveer die eerste knoppie, en maak die derde een van tipe reset.