ข้ามไปยังเนื้อหา

Props

ใน React คุณรับ props เข้ามาเป็น argument ของ function แล้ว destructure ตรง parameter list ส่วนใน Svelte 5 คุณเรียก rune $props() แล้ว destructure ผลลัพธ์ที่ได้ — รูปแบบเกือบจะเหมือนกันเป๊ะ ดังนั้นการแมปในหัวจึงเกิดขึ้นแทบจะทันที

React props เทียบกับ `$props()`

// Badge.jsx
function Badge({ label, count = 0, color = 'blue' }) {
  return (
    <span style={{ color }}>
      {label}: {count}
    </span>
  );
}
export default Badge;

<!-- Badge.svelte -->
<script>
  let { label, count = 0, color = 'blue' } = $props();
</script>

<span style="color: {color}">
  {label}: {count}
</span>

syntax การ destructure นั้น เหมือนกัน ค่า default ก็ทำงานแบบเดียวกัน ความต่างเดียวคือต้นทาง: React ใช้ argument ของ function ส่วน Svelte ใช้ $props()

Rest props

ถ้าคุณอยากส่งต่อ attribute ที่ไม่รู้จักไปยัง DOM element (เช่น สำหรับ wrapper component) ก็ spread ส่วนที่เหลือออกไป:

function Button({ children, ...rest }) {
  return <button {...rest}>{children}</button>;
}

<script>
  let { children, ...rest } = $props();
</script>

<button {...rest}>
  {@render children?.()}
</button>

ลองเล่น: props demo ที่รันได้จริง

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let { greeting = 'Hello', name = 'World', color = '#FF3E00' } = $props();
</script>

<p style="color: {color}; font-size: 1.4rem;">
  {greeting}, {name}!
</p>

<style>
  p { font-weight: bold; }
</style>

ลองแก้ค่า default ในการ destructure $props() ดู แล้วจะเห็น output เปลี่ยนทันที