Օգտագործելով պրոպսները պայմանական ռենդերինգում Styled Components-ի հետ React-ում

Պրոպսները կարող են օգտագործվել նաև պայմանական ռենդերինգի համար: Վերցնենք React կոմպոնենտը Block, որի հետ աշխատել ենք նախորդ դասին:

Եկեք անենք, որ առաջին ինփութի ֆոնը դեղին լինի, իսկ մյուս ինփութների համար՝ կանաչ: Դրա համար կոմպոնենտի ստիլերի մեջ ավելացնենք ևս մեկ տող և կստացվի.

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 պրոպսը երկրորդ կոճակին: