การใช้พร็อพในการเรนเดอร์แบบมีเงื่อนไขด้วย 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 ให้กับปุ่มที่สอง