Propside kasutamine tingimuslikus renderdamises Styled Componentsiga Reactis
Proppe saab kasutada ka tingimuslikuks
renderdamiseks. Võtame React komponendi
Block, millega me eelmisel
tunnil töötasime.
Teeme nii, et meie esimese
inputi taust oleks kollane ja teiste inputide
puhul roheline. Selleks lisame stiilidesse komponendi
Input jaoks veel ühe rea ja saame:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Lisame propsi first
esimesele inputile:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Kasutades õppetüki teoorias toodud
tingimuslikku renderdamist, modifitseerige eelmise
õppetüki ülesande lahenduse koodi nii, et
propsi warn olemasolul oleks nupu tekst
punane ja selle taust kollane, ning ilma
selleta - roheline taust ja valge tekst.
Edastage warn teisele nupule.
