Prop izmantošana nosacītā renderēšanā ar Styled Components React
Props var izmantot arī nosacītai
renderēšanai. Paņemsim React komponentu
Block, ar kuru mēs strādājām
iepriekšējā nodarbībā.
Padarīsim tā, lai mums fonam pirmajam
inputam būtu dzeltena krāsa, bet pārējiem inputiem
zaļa krāsa. Lai to izdarītu, stilos komponentam
Input pievienosim vēl vienu rindiņu un sanāks:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Pievienosim prop first
pirmajam inputam:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Izmantojot nosacīto renderēšanu, kas norādīta
nodarbības teorijā, modificējiet uzdevuma risinājuma kodu
no iepriekšējās nodarbības tā, lai, ja
ir props warn, pogas teksts būtu
sarkans un tās fons dzeltenš, bet bez
tā - zaļš fons un balts teksts.
Pārsūtiet warn otrajai pogai.
