Styled-Components with props

#HelloFrontend #HelloErmine #HelloWorld2021

การใช้ styled-components กับ props

ข้อดีของการใช้ styled-components อีกข้อหนึ่งก็คือ เราสามารถทำให้ component แสดงผล style ตาม props ที่เราส่งเข้าไปได้

Example1

const Button = styled.button`
  background-color: ${props => props.level};
  color: white;
  cusor: pointer;
  padding: 5px;
`

function App() {
  return (
    <div>
      <Button level='blue'>I'm Button</Button>
    </div>
  );
}

ผลลัพธ์

• บรรทัดที่ 2 ในส่วนที่เป็นการระบุ value ให้กับ property ที่ชื่อว่า background-color จะเป็นการใช้ function expression ซึ่งเขียนอยู่ในรูปแบบ arrow function ฟังก์ชันนั้นจะถือว่าเป็นค่า ๆ หนึ่งที่สามารถนำมาเป็นค่าของตัวแปรต่าง ๆ ได้

• จากตัวอย่าง function expression นี้ หมายถึง ให้ค่าของสีที่จะเอามากำหนดให้ background-color ขึ้นอยู่กับ props โดยจะรับค่าที่อยู่ใน props ที่มีชื่อว่า level มาใส่

• ค่าที่อยู่ใน props ที่ชื่อ level มีค่าเป็น blue ดังนั้น props จะส่งค่านี้ไปยัง function expression ที่มีการเรียก props.level ผลลัพธ์ที่ได้จึงเป็นสีน้ำเงิน (blue)

ถ้าเปลี่ยนค่าใน props ที่มีชื่อว่า level เป็นค่าอื่นที่ไม่ใช่ชื่อสี หรือ รหัสสี ผลลัพธ์ที่ได้มันจะไม่แสดงผลสีให้เราเห็น

Example2

function getLevelColor(level){
  if (level ==='danger') return 'red';
  return 'blue';
}

const Button = styled.button`
  background-color: ${props => getLevelColor(props.level)};
  color: white;
  cusor: pointer;
  padding: 5px;
`

function App() {
  return (
    <div>
      <Button level='danger'>I'm Button</Button>
    </div>
  );
}

ผลลัพธ์

• function getLevelColor(); รับค่าของ props ที่ชื่อว่า level เข้าไปทำงานตามเงื่อนไขข้างใน function และ return ค่าออกมา

• บรรทัดที่ 16 props ที่มีชื่อว่า level เก็บค่าคำว่า danger เอาไว้ เมื่อส่งค่าไปยัง function getLevelColor(); ก็จะทำการตรวจสอบตามเงื่อนไขที่กำหนดไว้ คือ ถ้าค่าที่รับมาจาก props ที่ชื่อว่า level มีค่าเท่ากับ danger จะ return red ถ้าไม่ใช่คำว่า danger จะ return เป็น blue

• เมื่อตรวจสอบตามเงื่อนไขใน function getlevelColor(); แล้ว พบว่าค่าที่รับมาจาก props ที่มีชื่อว่า level ตรงกับคำว่า danger ทำให้ return red

• บรรทัดที่ 7 ในส่วนที่เป็นการระบุ value ให้กับ property ที่มีชื่อว่า background-color เป็นการระบุ value แบบ function expression ก็คือ จะเรียกใช้ค่าที่ return ออกมาเมื่อเช็กเงื่อนไขแล้วจาก function getlevelColor(); ซึ่งจะ return ออกมาเป็นคำว่า red function expression ในบรรทัดนี้จะรับค่า red ไปกำหนดให้กับ background-color ทำให้ผลลัพธ์ที่ได้จะเป็นปุ่มที่มีสีแดง

ถ้าเปลี่ยนค่าใน props ที่มีชื่อว่า level เป็นค่าอื่นที่ไม่ใช่คำว่า danger เมื่อส่งไปยัง function getLevelColor(); จะไม่เข้าเงื่อนไข ทำให้ return blue ปุ่มที่ได้ก็จะมีสีน้ำเงิน