Gebruik van props in conditioneel renderen met Styled Components in React
Props kunnen ook worden gebruikt voor conditioneel
renderen. Laten we de React-component
Block nemen, waarmee we in de
vorige les hebben gewerkt.
Laten we ervoor zorgen dat de achtergrond voor de eerste
invoer geel is, en voor de andere invoeren
groen. Hiervoor voegen we nog een regel toe
aan de stijlen voor de component
Input en het wordt:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Laten we de prop first toevoegen
aan de eerste invoer:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Gebruikmakend van conditioneel renderen, zoals gepresenteerd
in de theorie van de les, wijzig de code van de oplossing
voor de taak van de vorige les zo, dat wanneer
de prop warn aanwezig is, de tekst van de knop
rood is en de achtergrond geel, en zonder
die prop - groene achtergrond en witte tekst.
Geef warn door aan de tweede knop.
