პროფსების გამოყენება პირობით რენდერინგში Styled Components-თან React-ში

პროფსების გამოყენება ასევე შესაძლებელია პირობითი რენდერინგისთვის. ავიღოთ React კომპონენტი Block, რომელთანაც ჩვენ ვმუშაობდით წინა გაკვეთილზე.

გავაკეთოთ ისე, რომ პირველი ინფუთისთვის ფონი იყოს ყვითელი, ხოლო სხვა ინფუთებისთვის მწვანე. ამისთვის, სტილებში კომპონენტისთვის Input დავამატოთ კიდევ ერთი ხაზი და მივიღებთ:

const Input = styled.input`
	background: ${(props) => (props.first ? 'yellow' : 'green')};

	margin: 5px;
	font-size: 18px;
`;

დავამატოთ პროფსი first პირველ ინფუთს:

<Container>
	<Input first />
	<Input placeholder="სახელი" type="text" />
	<Input type="password" />
</Container>

გაკვეთილის თეორიაში მოცემული პირობითი რენდერინგის გამოყენებით, შეცვალეთ წინა გაკვეთილის ამოცანის ამოხსნის კოდი ისე, რომ პროფსის warn არსებობის შემთხვევაში ღილაკის ტექსტი იყოს წითელი და მისი ფონი ყვითელი, ხოლო მისი არარსებობის შემთხვევაში - მწვანე ფონი და თეთრი ტექსტი. გადაეცით warn მეორე ღილაკს.