การใช้พร็อพในการเรนเดอร์แบบมีเงื่อนไขด้วย Styled Components ใน React

พร็อพสามารถใช้สำหรับการเรนเดอร์แบบมีเงื่อนไขได้ ลองใช้คอมโพเนนต์ React Block ที่เราได้ทำงานด้วยในบทเรียนที่ผ่านมา

เราจะทำให้พื้นหลังสำหรับอินพุตแรกเป็นสีเหลือง และสำหรับอินพุตอื่นๆ เป็นสีเขียว เพื่อการนี้ ในสไตล์สำหรับคอมโพเนนต์ Input ให้เพิ่มอีกหนึ่งบรรทัด จะได้ดังนี้:

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

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

เพิ่มพร็อพ first ให้กับอินพุตแรก:

Block.js<Container>
  <Input first />
  <Input placeholder="name" type="text" />
  <Input type="password" />
</Container>