การสร้าง UI ด้วย React (IV) - ใช้ปีกกาใน JSX

JSX ช่วยให้เราเขียนภาษาที่เหมือน HTML ในไฟล์ JavaScript โดยรวมการทำงานและเนื้อหาเอกสารไว้ด้วยกัน หากเราต้องการใส่ค่าที่มีการเปลี่ยนแปลงได้ในเนื้อหา เราสามารถใช่ ปีกกา เพื่อใช้แสดงข้อมูลได้ใน JSX ได้

---

ในซีรีย์นี้:

• การสร้าง React Component
• Import และ Export Component
• เขียน JSX
• ใช้ ปีกกา ใน JSX
• ส่งค่าผ่าน Props
• การแสดง Component แบบมีเงื่อนไข (Conditional Rendering)
• การแสดงข้อมูลเป็น List
• แยก Component (สร้าง Pure Component)
• มอง UI ให้เป็นแผนภูมิต้นไม้ (Tree Structure)

---

ใช้ตัวแปรแทน string

เมื่อเราต้องการใส่ค่าที่เป็น string ใน attribute ของ JSX เราสามารถใช้ได้ทั้ง single (') หรือ double quote (")

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

จะเห็นว่า "https://i.imgur.com/7vQD0fPs.jpg" และ "Gregorio Y. Zara" เป็นค่า string ที่ถูกใส่ใน attribute

หากเราต้องการให้ค่าสามารถเปลี่ยนแปลงได้ เราสามารถกำหนดให้มันเป็นตัวแปร และเปลี่ยน " และ " เป็น { และ }

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

ใช้ปีกกา: เปิดใช้งาน JavaScript

ใน JSX เราสามารถเรียกใช้งาน JavaScript ได้ โดยการใส่คำสั่ง JavaScript ในปีกกา { }. เช่น หากเราต้องการใช้ตัวแปร name ใน <h1> สามารถทำได้ตามตัวอย่างดังนี้:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

ทั้งนี้สามารถใส่คำสั่ง JavaScript แบบอื่นๆ เช่นตัวอย่างคือฟังค์ชั่น formatDate() ก็ได้:

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

ใช้ปีกกาตอนไหน

เราสามารถใช้ปีกกาใน JSX ได้ 2 วิธีได้แก่:

1. ใช้เป็นข้อความ โดยใส่เข้าไปในแท็กของ JSX โดยตรง:

   • ✅ <h1>{name}'s To Do List</h1> ใช้งานได้
   • ❌ <{tag}>Gregorio Y. Zara's To Do List</{tag}> ไม่ทำงาน

2. ใช้เป็น Attribute หลังเครื่องหมาย =:

   • ✅ src={avatar} จะเป็นการแทนค่าตัวแปร avatar ใน src
   • ❌ src="{avatar}" จะเป็นการใช้ string "{avatar}"

ใช้ปีกกาสองชั้น: สำหรับ CSS และ Object ใน JSX

หากเราต้องการส่ง Object เช่น { name: "Hedy Lamarr", inventions: 5 } เป็นค่าใน Attribute ของ JSX สามารถส่งเป็นค่าได้ดังนี้ person={{ name: "Hedy Lamarr", inventions: 5 }}

กรณีเดียวกับการใส่ CSS ใน JSX สามารถใส่ Object ของ CSS ใน attribute style ได้:

⚠️ ผิดกันง่ายๆ
property ของ css จะต้องเป็น camelCase. เช่นหาก HTML <ul style="background-color: black"> จะต้องเขียนเป็น <ul style={{ backgroundColor: 'black' }}>.

วิธีใช้ Object ในปีกกาแบบอื่นๆ

จากตัวอย่าง สังเกตุว่า Object person มี string name และ object theme:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

ซึ่งเราสามารถนำค่าของ person ไปใช้ใน Component เช่นดังตัวอย่าง:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

สรุป

• หากเราใช้ " ครอบข้อความใน attribute ของ JSX จะเป็นการส่งค่า string.
• แต่ถ้าเราใช้ ปีกกา จะเป็นการแทนค่าของ JavaScript เพื่อกำหนดเงื่อนไข หรือ แสดงค่านั้นๆ แทนได้.
• {{ และ }} ไม่ใช่คำสั่งพิเศษ: แต่เป็นการซ้อน Object ของ JavaScript เพื่อส่งค่าไปยังปีกกาของ JSX.