Props

#HelloFrontend #HelloErmine #HelloWorld2021

Props คืออะไร ?

JSX attribute ที่เรากำหนดตอนเรียกใช้ component จะถูก React รวบรวมเป็น object แล้วส่งเป็น props ไปให้ component นั้น ๆ

function Hello(props) {
    return <h1>Hello {props.name}</h1>;
}
 
const element = <Hello name="Poopoo" />; // <h1>Hello Poopoo</h1>

function component จะรับ props เป็น argument 1 ตัว (นิยมใช้ชื่อ parameter เป็น props แต่สามารถใช้ชื่ออื่นได้)

props.children

component ที่เราสร้างสามารถมี tag เปิดและปิดได้เหมือน HTML โดยทุกอย่างที่อยู่ข้างในจะถูกส่งมาใน props.children (รวมไปถึง JavaScript expression)

props.children จะเป็นค่า array เมื่อมี children มากกว่า 1 ตัว

function Hello(props) {
    return <h1>Hello {props.children}</h1>;
}
 
const element = <Hello>Doodoo</Hello>; // <h1>Hello Doodoo</h1>

แหล่งอ้างอิง

Components and Props – React