Истифодаи пропсҳо дар рендерини шартӣ бо 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="name" type="text" />
	<Input type="password" />
</Container>

Бо истифода аз рендерини шартӣ, ки дар назарияи дарс оварда шудааст, коди ҳалли вазифа ба дари гузаштаро тавре таҳрир кунед, ки дар ҳолати вуҷуд доштани пропси warn матни тугма сурх бошад ва заминааш зард бошад, ва бе он - заминаи сабз ва матни сафед. warn-ро ба тугмаи дуюм бигузоред.