การประกอบ (Composition): children และการแบ่งเป็นคอมโพเนนต์

สร้างคอมโพเนนต์คอนเทนเนอร์ที่นำกลับมาใช้ซ้ำได้ด้วย prop children และแบ่งหน้าจอของคุณตามความรับผิดชอบที่ชัดเจน

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

บางคอมโพเนนต์ไม่รู้เนื้อหาของตนล่วงหน้า: การ์ด หน้าต่างโมดัล เลย์เอาต์ React แก้ปัญหานี้ด้วย prop พิเศษ children: ทุกสิ่งที่คุณวางไว้ระหว่างแท็กเปิดและปิดของคอมโพเนนต์จะถูกส่งให้มัน พร้อมสำหรับแทรกไปยังตำแหน่งใดก็ได้ที่มันต้องการ คอนเทนเนอร์จัดการกรอบ ส่วนผู้เรียกจัดหาเนื้อหา

function Card({ children }) {
  return <section className="card">{children}</section>;
}

function App() {
  return (
    <Card>
      <h2>Invoice #1024</h2>
      <p>Amount: €49.90</p>
    </Card>
  );
}

เมื่อสล็อตเดียวไม่พอ ให้ส่ง JSX ผ่าน props ที่ตั้งชื่อ (named props): title, footer, แถบแอ็กชัน prop สามารถรับ React element ได้เหมือนค่าอื่น ๆ ทุกประการ คุณจะได้ “สล็อต” หลายช่อง แต่ละช่องมีชื่อชัดเจน

function Modal({ title, footer, children }) {
  return (
    <div className="modal">
      <header>{title}</header>
      <div className="modal-body">{children}</div>
      <footer>{footer}</footer>
    </div>
  );
}

การประกอบยังชี้นำการ แบ่ง (splitting) ด้วย คอมโพเนนต์ควรมีความรับผิดชอบที่ระบุได้อย่างเดียว: แสดงแถวของผู้ใช้ จัดวางรายการ ทันทีที่คอมโพเนนต์สั่งสมหลายบทบาท ให้แยกคอมโพเนนต์ย่อยออกมา: แต่ละตัวจะสั้นลง ทดสอบง่ายขึ้น และนำกลับมาใช้ซ้ำที่อื่นได้

function UserList({ users }) {
  return (
    <ul>
      {users.map((user) => (
        <UserRow key={user.id} user={user} />
      ))}
    </ul>
  );
}

function UserRow({ user }) {
  return (
    <li>
      <strong>{user.name}</strong> - {user.email}
    </li>
  );
}

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

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

1. prop children ของคอมโพเนนต์รับอะไร?
   • รายการคอมโพเนนต์ลูกที่ถูกประกาศไว้ในไฟล์เดียวกัน
   • ทุกสิ่งที่วางไว้ระหว่างแท็กเปิดและปิดของมัน
   • props ที่คอมโพเนนต์แม่ส่งลงมา
2. คุณสามารถส่ง JSX ใน prop อื่นนอกจาก children ได้ไหม?
   • ได้ React element เป็นค่าเหมือนค่าอื่น ๆ ทุกประการ
   • ไม่ได้ มีเพียง prop children เท่านั้นที่รับ JSX
   • ได้ แต่ในรูปสตริงที่มี HTML เท่านั้น
3. สัญญาณใดบ่งชี้ได้น่าเชื่อถือที่สุดว่าคอมโพเนนต์ควรถูกแบ่ง?
   • มันเกินยี่สิบบรรทัดของโค้ด
   • มันใช้ useState มากกว่าหนึ่งตัว
   • มันรวมความรับผิดชอบที่แตกต่างกันหลายอย่างไว้ในการเรนเดอร์