มาดูตัวอย่างการใช้ Props ใน astro เพื่อรับ data จาก parent กันครับ

เวลาเราสร้าง component นั้น หลาย ๆ component เราต้องการรับค่าจาก parent เพื่อมาใช้งาน โดยใน astro นั้น กำหนดมาให้เราใช้ props ในการรับค่า

ตัวอย่างการรับค่า props ใน component

export interface Props {
	title: string;
}

const { title } = Astro.props;

จากโค้ดเราก็กำหนด interface Props โดยจะมี title ที่เรารับค่ามา

จากนั้นเราก็จะใช้ Astro.props เพื่อรับ props

ส่วนใน Parent นั้น เราก็จะได้ตัวอย่างประมาณนี้

---
import Layout from '../../layouts/Layout.astro';

let title = "test props from devcode";
---

<Layout title={title}>
    <div>Hello world devcode.doesystem.com</div>
</Layout>

จากโค้ดเราจะ import Layout component จากนั้นก็ทำการเรียกใช้

ในการเรียกใช้ component นั้น เราจะส่งค่า title ของแต่ละหน้าไปด้วย เราจะเรียกใช้ title แล้วส่งค่าเข้าไปตรง ๆ เลย ตามตัวอย่าง