การส่ง id ไปยังคอมโพเนนต์ใน React

คุณทราบแล้วว่าแอตทริบิวต์ของแท็กคอมโพเนนต์ จะเข้าสู่พร็อพส์ นี่เป็นจริงสำหรับแอตทริบิวต์ทั้งหมด ยกเว้นแอตทริบิวต์ key ซึ่งจำเป็น สำหรับการใช้ในลูป ดังนี้:

jsxconst items = prods.map(prod => {
  return <Product
    key ={prod.id}
    name={prod.name}
    cost={prod.cost}
  />;
});

ในกรณีนี้ แอตทริบิวต์ name และ cost จะเข้าสู่พร็อพส์ ส่วน key - จะไม่เข้าสู่ อย่างไรก็ตาม เราอาจจำเป็นต้อง ส่ง id ไปยังพร็อพส์ของคอมโพเนนต์ ใน กรณีนี้ เราจะต้องเพิ่มแอตทริบิวต์อีกหนึ่งรายการ:

jsxconst items = prods.map(prod => {
  return <Product
    key ={prod.id}
    id  ={prod.id}
    name={prod.name}
    cost={prod.cost}
  />;
});