Bruk av props i betinget rendering med Styled Components i React
Props kan også brukes til betinget
rendering. La oss ta React-komponenten
Block som vi jobbet med i
forrige leksjon.
La oss gjøre slik at bakgrunnen for første
inputfelt er gul, og for andre inputfelt
grønn. For å gjøre dette, legger vi til
en linje til i stilene for komponenten
Input, og det blir:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
La oss legge til prop first
på første input:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Ved å bruke betinget rendering som er vist
i teoridelen av leksjonen, modifiser koden til løsningen
av oppgaven fra forrige leksjon slik at når
propen warn er til stede, skal knappens tekst være
rød og bakgrunnen gul, og uten
den - grønn bakgrunn og hvit tekst.
Send warn til den andre knappen.
