Props naudojimas sąlyginiame renderinime su Styled Components React'e
Props taip pat gali būti naudojami ir sąlyginiam
renderinimui. Paimkime React komponentą
Block, su kuriuo dirbome
praeitoje pamokoje.
Padarykime taip, kad pirmo įvesties lauko
fonas būtų geltonas, o kitų įvesties laukų
fonas žalias. Tam, į komponento
Input stilius pridėkime dar vieną eilutę ir gausime:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Pridėkime propą first
pirmam įvesties laukui:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Naudodamiesi pamokos teorijoje pateiktu
sąlyginiu renderinimu, modifikuokite praeitos
pamokos užduoties sprendimo kodą taip, kad esant
propui warn mygtuko tekstas būtų
raudonas ir jo fonas būtų geltonas, o be
jo - žalias fonas ir baltas tekstas.
Perduokite warn antram mygtukui.
