Props: การส่งข้อมูลเข้าสู่คอมโพเนนต์

เรียนรู้วิธีทำให้คอมโพเนนต์ของคุณนำกลับมาใช้ซ้ำได้ ด้วยการส่งข้อมูลเข้าไปผ่าน props

7 นาที · 3 คำถาม

คอมโพเนนต์ที่แสดงสิ่งเดิมเสมอนั้นไม่ค่อยมีประโยชน์ Props (ย่อมาจาก "properties") คือข้อมูลที่คุณส่งเข้าไปในคอมโพเนนต์ เหมือนกับอาร์กิวเมนต์ของฟังก์ชันเป๊ะ ลองนึกถึงการ์ดเชิญ: แม่แบบเหมือนกันสำหรับทุกคน มีเพียงชื่อของแขกที่เปลี่ยนไป คอมโพเนนต์คือแม่แบบ ส่วน prop คือชื่อ

function Greeting(props) {
  return <p>Hello, {props.name}!</p>;
}

function App() {
  return (
    <div>
      <Greeting name="Lea" />
      <Greeting name="Karim" />
    </div>
  );
}

ใน App คุณเขียน name="Lea" เหมือนแอตทริบิวต์ของ HTML: React รวบรวมค่าเหล่านี้ทั้งหมดไว้ในออบเจ็กต์ ซึ่งคอมโพเนนต์จะได้รับภายใต้ชื่อ props จากนั้นคุณอ่าน props.name ภายในวงเล็บปีกกา ในทางปฏิบัติ คุณมักจะ ดีสตรัคเจอร์ (destructure) props โดยตรงในวงเล็บของฟังก์ชัน: function Greeting({ name }) มีอีกจุดสำคัญหนึ่ง: ข้อความอยู่ระหว่างเครื่องหมายคำพูด แต่ทุกอย่างที่เหลือ (ตัวเลข บูลีน อาร์เรย์) อยู่ระหว่าง วงเล็บปีกกา

function ProfileCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age} years old</p>
    </div>
  );
}

function App() {
  return <ProfileCard name="Nadia" age={31} />;
}

นั่นคือพลังทั้งหมดของ props: เครือข่ายสังคมออนไลน์ไม่ได้เขียนคอมโพเนนต์หนึ่งตัวต่อหนึ่งโพสต์ แต่เขียนคอมโพเนนต์ Post เพียงตัวเดียว แล้วส่ง props ที่ต่างกันให้มันเป็นล้าน ๆ ครั้ง คุณเขียนแม่แบบครั้งเดียว แล้วใช้มันได้ทุกที่

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

1. props มีไว้ทำอะไร?
   • ส่งข้อมูลจากคอมโพเนนต์แม่ไปสู่คอมโพเนนต์ลูก
   • เก็บข้อมูลที่เปลี่ยนแปลงไปตามเวลา
   • ใช้สไตล์ CSS กับคอมโพเนนต์
2. คุณจะส่งตัวเลข 25 เข้าไปในคอมโพเนนต์ Profile ได้อย่างไร?
   • <Profile age="25" />
   • <Profile age={25} />
   • <Profile age=25 />
3. คอมโพเนนต์สามารถแก้ไข props ที่ได้รับมาได้หรือไม่?
   • ได้ ตราบใดที่ทำภายใน return
   • ได้ แต่เฉพาะสตริงเท่านั้น
   • ไม่ได้ props เป็นแบบอ่านได้อย่างเดียว