Gebruik van Props in Voorwaardelijke Rendering met Styled Components in React

Props kan ook gebruik word vir voorwaardelijke rendering. Kom ons neem die React-komponent Block waarmee ons in die vorige les gewerk het.

Laat ons maak dat die agtergrond vir die eerste invoerveld geel is, en vir ander invoervelde groen. Om dit te doen, voeg ons nog 'n reël by aan die style vir die komponent Input en dit sal so word:

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

Laat ons die prop first byvoeg by die eerste invoerveld:

<Container>
	<Input first />
	<Input placeholder="name" type="text" />
	<Input type="password" />
</Container>

Deur die voorwaardelijke rendering wat in die les-teorie gegee is te gebruik, wysig die kode-oplossing vir die vorige les se taak sodat, wanneer die prop warn teenwoordig is, die knoppie se teks rooi is en sy agtergrond geel is, en sonder dit - groen agtergrond en wit teks. Gee die prop warn aan die tweede knoppie.