Uporaba props v pogostnem upodabljanju s Styled Components v Reactu
Props lahko uporabimo tudi za pogojno
upodabljanje. Vzemimo React komponento
Block, s katero smo delali v
prejšnji lekciji.
Naredimo tako, da bo ozadje za prvi
input rumeno, za druge inpute pa
zeleno. Za to v stile za komponento
Input dodajmo še eno vrstico in dobimo:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Dodajmo prop first
prvemu inputu:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Z uporabo pogojnega upodabljanja, predstavljenega
v teoretičnem delu lekcije, spremenite kodo rešitve
naloge iz prejšnje lekcije tako, da bo ob
prisotnosti props warn besedilo gumba
rdeče in njegovo ozadje rumeno, brez
njega pa - zeleno ozadje in belo besedilo.
Posredujte warn drugemu gumbu.
