Styled Components bilan Reactda shartli renderlashda proplardan foydalanish
Proplardan shartli
renderlash uchun ham foydalanish mumkin. Oldingi
darsda ishlagan React komponenti
Block ni olaylik.
Birinchi input uchun fonni sariq, boshqa inputlar
uchun yashil qilaylik. Buning uchun, Input
komponenti uchun stillarga yana bir qator qo'shamiz va natija:
const Input = styled.input`
background: ${(props) => (props.first ? 'yellow' : 'green')};
margin: 5px;
font-size: 18px;
`;
Birinchi inputga first
propini qo'shamiz:
<Container>
<Input first />
<Input placeholder="name" type="text" />
<Input type="password" />
</Container>
Dars nazariyasida keltirilgan shartli renderlashdan
foydalanib, oldingi darsdagi masala yechimini shunday
o'zgartiringki, warn propi mavjud bo'lganda
tugma matni qizil va uning fon sariq bo'lsin,
yo'q bo'lsa - yashil fon va oq matn.
warn ni ikkinchi tugmaga o'tkazing.
