reactjs - จะกำหนดชนิดของ props ของคอมโพเนนต์อย่างเคร่งครัดซึ่งรวมถึงทั้งคอมโพเนนต์ภายในที่จะเรนเดอร์และ props ของคอมโพเนนต์ภายในได้อย่างไร?

นี่คือสิ่งที่ฉันต้องการในที่สุด คือคอมโพเนนต์แบบห่อหุ้มที่เรนเดอร์คอมโพเนนต์สุดท้ายที่ส่งเข้ามาเท่านั้นเมื่อข้อมูลถูกดึงมาและตรวจสอบความถูกต้องเรียบร้อยแล้ว

<Wrapper
  url="/foo"
  as={FooComponent}
  validate={fooResponse => fooResponse != null}
  fooPropsA={1}
  fooPropsB={2}
/>

นี่คือความพยายามล่าสุดของฉัน https://tsplay.dev/3NDZOW

โดยสรุป ข้อกำหนดมีดังต่อไปนี้:

คอมโพเนนต์ภายในต้องมี prop value เพื่อรับค่าที่ดึงมาเมื่อมีการเรนเดอร์จริง
การตรวจสอบความถูกต้องของอาร์กิวเมนต์ฟังก์ชันควรถูกสรุปจากชนิดของคอมโพเนนต์ภายใน (props)
คอมโพเนนต์ห่อหุ้มควรรับพร็อพทั้งหมดของคอมโพเนนต์ภายใน ยกเว้น value

เป็นไปได้ไหม?

หมายเหตุ: มีคำถามที่คล้ายกันซึ่งบอกว่ามันเป็นไปไม่ได้หรือทำงานที่แตกต่างออกไปเล็กน้อย แต่ฉันไม่สามารถนำมาใช้กับกรณีของฉันได้ ดังนั้นจึงไม่แน่ใจว่ามันเป็นไปได้หรือไม่

1. ส่วนประกอบตรรกะที่คล้ายกัน https://stackoverflow.com/questions/51762529/use-props-to-pass-another-componentprops-to-be-rendered-and-keep-type-safety

2. เกี่ยวกับการอนุมานประเภท https://stackoverflow.com/questions/56505560/could-be-instantiated-with-a-different-subtype-of-constraint-object-ts2322