เมื่อไรที่ต้องใช้ PropsWithChildren

PropsWithChildren เป็นข้อมูลประเภท Type (ไทป์) ทำให้คุณสามารถกำหนดค่าเพิ่มเติมให้กับ React component props เพื่อส่งค่าข้อมูลไปยัง ส่วนประกอบต่างๆ (components) ไปยัง “children” และ คลาสประเภท Type ของ PropsWithChildren ทำให้เราสามารถควบคุมผลลัพธ์ได้โดยตรง จากการเริ่มกำหนดค่าที่ต้องการเพิ่ม ก่อนส่งไปยังส่วนประกอบ และค่านั้นจะกลายเป็นส่วนหนึ่ง ของ ReactNode

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

type PropsWithChildren<P> = P & { children?: ReactNode }

สรุปก็คือ PropsWithChildren จะทำการ return ค่าที่เป็น union type ดังนั้น ก่อนการใช้งานคุณจำเป็นต้องระบุ generic ของ PropsWithChildren<T> ให้ได้เสียก่อน

หากได้เข้าไปดูการ return ค่าจะเป็นว่า P & (union) กับ ReactNode นั้นเอง และค่า P คือ generic ที่ไม่สามารถ null ได้ ดังนั้น จำเป็นต้องระวัง

P & { children?: ReactNode }

เพราะรับค่า P ได้ union หรือ & กับ ReactNode ไปด้วยนั้นเอง

ตัวอย่างสำหรับการใช้ PropsWithChildren

import { PropsWithChildren } from 'react';

type ButtonProps = {
  backgroundColor : string;
  onClick: () => void;
};

const Button = ({ backgroundColor, onClick, children }: PropsWithChildren<ButtonProps>) => {
  return (
    <button
        style={{ backgroundColor: backgroundColor }}
        onClick={onClick}>
      {children}
    </button>
  );
};

การใช้ React.PropsWithChildren ขึ้นอยู่กับกรณีการใช้งานเฉพาะและข้อกำหนดของส่วนประกอบ React ของคุณ

ใช้ React.PropsWithChildren เมื่อ

ส่วนประกอบของคุณได้รับการออกแบบให้จัดการและแสดงผลองค์ประกอบลูกอย่างชัดเจน
คุณต้องการบังคับใช้ว่าส่วนประกอบนั้นๆ ควรได้รับและทำงานกับองค์ประกอบลูก
คุณต้องการกำหนดค่าองค์ประกอบ หรือ Props ที่กำหนดเองเพิ่มเติมพร้อมไปยังค่ากำหนดค่าองค์ประกอบลูก
คุณกำลังใช้ TypeScript และต้องการให้แน่ใจว่าคลาสไทป์ต้องได้ผ่านการับรองก่อนส่งต่อไปยังค่าองค์ประกอบลูก