ค้นหาเว็บไซต์

javascript - ส่ง prop Children ไปยังคอมโพเนนต์ React Memo


ฉันกำลังอยู่ในกระบวนการปรับแต่งส่วนประกอบ React SFC จำนวนหนึ่งโดยใช้ React.memo

ส่วนประกอบเหล่านี้ส่วนใหญ่มีลูก โครงการนี้ยังใช้ TypeScript ด้วย

ฉันเริ่มรู้สึกว่าคอมโพเนนต์ memo ไม่รองรับลูกหลาน เนื่องจากฉันได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้ทุกครั้งที่เกิดข้อผิดพลาด:

คุณสมบัติ 'children' ไม่ปรากฏอยู่ในประเภท 'IntrinsicAttributes & object'

ปรากฏว่าสิ่งนี้ใช้ได้เฉพาะเมื่อฉันระบุประเภท Props ให้กับคอมโพเนนต์ เช่น

const MyComponent: React.SFC<PropType>

หากฉันลบประเภทของ prop (ดังที่แสดงด้านล่าง) ข้อผิดพลาดก็จะไม่เกิดขึ้น

const MyComponent: React.SFC

แน่นอน ฉันต้องการประเภทพร็อพในเกือบทุกกรณี

ฉันได้ตั้งค่า Code Sandbox ที่จำลองปัญหาไว้:

https://codesandbox.io/s/cool-keldysh-urddu?fontsize=14&hidenavigation=1&theme=dark

tl;dr: ทำไมคอมโพเนนต์ React.memo ถึงไม่รับ prop ของลูกเมื่อมีการระบุชนิดสำหรับ props ของคอมโพเนนต์?

คำตอบ #1

นี่ดูเหมือนจะเป็นปัญหากับการพิมพ์ React.memo ซึ่งมันไม่ได้ส่งต่อ props ของ children โดยอัตโนมัติ มีการอภิปรายเกี่ยวกับเรื่องนี้ใน repo ของ DefinitelyTyped

ตอนนี้ คุณสามารถระบุ prop children ด้วยตนเองได้:

type ChildProps = {
  name: string;
  children: React.ReactNode;
};

บทความที่เกี่ยวข้อง