javascript - React + TypeScript: การส่ง React Component เป็น Props, การเรนเดอร์ด้วย props [ข้อผิดพลาด: TS2339]

ฉันกำลังใช้ React + TypeScript ฉันมีสถานการณ์ที่ฉันต้องส่งคอมโพเนนต์ React.SFC ไปยังคอมโพเนนต์อื่น ซึ่งฉันกำลังทำแบบนี้:

Container.tsx

import ChildComp from './ChildComp';
<ParentComponent CustomComp={ ChildComp } someArray={ [1, 2] } />

ตอนนี้ปัญหาคือ ผมต้องการวนซ้ำคอมโพเนนต์ ChildComp นี้กับค่าของ someArray ภายใน ParentComponent

Component ย่อยนี้มี prop ของตัวเองคือ someValue และฉันได้เพิ่มประเภทให้กับมัน ว่าสามารถรับค่าอะไรได้บ้าง และฉันกำลังส่ง prop ตัวนี้ขณะวนซ้ำมันอยู่ภายใน Parent

ParentComponent.tsx

const content = someArray.map((value, index) => (
  <CustomComp someValue={ value } key={ index } />
));
{ content }

แต่ฉันได้รับข้อผิดพลาดว่า TS2339: ไม่มีคุณสมบัติ 'someValue' ในประเภท 'IntrinsicAttributes & { children?: ReactNode; }'.

แม้ว่า ถ้าฉันใช้การวนซ้ำข้างต้นโดยตรงใน Container.tsx ที่ฉันกำลังนำเข้า มันทำงานได้ดี แต่จะไม่ทำงานถ้าฉันส่งมันไปยังคอมโพเนนต์อื่น ฉันพลาดอะไรไปหรือเปล่า?

หมายเหตุ: เนื่องจากการวนซ้ำเดียวกันกำลังทำงานบน Container.tsx ฉันจึงส่งเนื้อหาที่ถูกวนซ้ำไปยัง ParentComponent และทำการเรนเดอร์มันเหมือนกับตัวแปร:

{ CustomComp }

นี่ใช้ได้ แต่ฉันอยากรู้ว่าทำไมวิธีแก้อีกวิธีจึงใช้ไม่ได้

รายละเอียดเพิ่มเติม

ChildComp.tsx

type Props = {
   someValue: number,
};

const ChildComp: React.SFC<Props> = ({ someValue }) => {
   return (
      // Content
      { someValue }
   )
}

ประเภทของ CustomComp ใน ParentComponent:

type Props = {
   CustomComp?: React.ReactNode | null
};

ก่อนหน้านี้มันเป็น React.ComponentType แต่ฉันได้รับข้อผิดพลาด ดังนั้นฉันจึงเปลี่ยนเป็น ReactNode เพราะตอนนี้ฉันกำลังส่งเนื้อหาโดยตรง

คำตอบ #1

พร็อพ CustomComp ไม่ได้พิมพ์อย่างถูกต้อง มันรับคอมโพเนนต์ (CustomComp={ ChildComp }) ไม่ใช่เอลิเมนต์ (CustomComp={ <ChildComp /> }) ในกรณีนี้มันจะไม่ใช่ React.ReactNode แต่จะเป็น React.ComponentType.

มันก็ไม่ใช่คอมโพเนนต์สุ่ม แต่เป็นคอมโพเนนต์เฉพาะที่รับ prop someValue props ของ ParentComponent น่าจะต้องถูกพิมพ์เป็น:

type ParentCompProps = {
   CustomComp: React.ComponentType<ChildCompProps>,
   someArray: number[]
};