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

สมมติว่าเรามีอาร์เรย์ของผลิตภัณฑ์:

jsxconst initProds = [
  {id: id(), name: 'product1', cost: 100},
  {id: id(), name: 'product2', cost: 200},
  {id: id(), name: 'product3', cost: 300},
];

สมมติว่าอาร์เรย์นี้อยู่ในคอมโพเนนต์ Products บันทึกผลิตภัณฑ์เหล่านี้ลงในสเตต ของคอมโพเนนต์:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
}

ตอนนี้เรามาไล่ผลิตภัณฑ์ด้วยลูป และแสดงผลในมาร์กอัปบางส่วน:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <div key={prod.id}>
      name: <span>{prod.name}</span>,
      cost: <span>{prod.cost}</span>
    </div>;
  });
  
  return <div>
    {items}
  </div>;
}

ดังที่คุณเห็น เนื้อหาภายในลูป map ของเรา ค่อนข้างซับซ้อน โดยเฉพาะถ้ามาร์กอัปของ ผลิตภัณฑ์เติบโตขึ้นในอนาคต ความซับซ้อน เช่นนี้ทำให้การอ่าน ทำความเข้าใจ และ บำรุงรักษาโค้ดเป็นเรื่องยาก

ควรจะดีกว่าถ้าแยกโค้ดที่รับผิดชอบในการแสดงผล ผลิตภัณฑ์ออกเป็นคอมโพเนนต์แยกต่างหาก ตั้งชื่อว่า Product นี่คือโค้ดของคอมโพเนนต์ของเรา:

jsxfunction Product({ name, cost }) {
  return <div>
    name: <span>{name}</span>,
    cost: <span>{cost}</span>
  </div>;
}

ตอนนี้ภายในคอมโพเนนต์ Products ในลูป map เรามาใช้คอมโพเนนต์ลูก Product:

jsxfunction Products() {
  const [prods, setProds] = useState(initProds);
  
  const items = prods.map(prod => {
    return <Product
      key ={prod.id}
      name={prod.name}
      cost={prod.cost}
    />;
  });
  
  return <div>
    {items}
  </div>;
}

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

ในทางเทคนิค เราได้ผลลัพธ์ว่าคอมโพเนนต์แม่ มีสเตตที่มีข้อมูล ส่วนคอมโพเนนต์ลูก ได้รับข้อมูลเหล่านี้ในรูปของพร็อพส์ และแสดงผลในลักษณะที่เราต้องการ

jsxconst initUsers = [
  {id: id(), name: 'user1', surname: 'surn1', age: 30},
  {id: id(), name: 'user2', surname: 'surn2', age: 31},
  {id: id(), name: 'user3', surname: 'surn3', age: 32},
];