ฉันกำลังทำงานกับโปรเจ็กต์ที่มี typescript, React และ Redux (ทั้งหมดทำงานใน Electron) และฉันพบปัญหาเมื่อฉันรวมองค์ประกอบตามคลาสหนึ่งในอีกอันและพยายามส่งผ่านพารามิเตอร์ระหว่างพวกเขา พูดอย่างหลวม ๆ ฉันมีโครงสร้างต่อไปนี้สำหรับส่วนประกอบคอนเทนเนอร์:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

และองค์ประกอบลูก:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

เห็นได้ชัดว่าฉันแค่รวมพื้นฐานเท่านั้นและยังมีอีกมากมายสำหรับทั้งสองคลาสนี้ แต่ฉันยังคงได้รับข้อผิดพลาดเมื่อฉันพยายามเรียกใช้สิ่งที่ดูเหมือนกับฉันเช่นรหัสที่ถูกต้อง ข้อผิดพลาดที่ฉันได้รับ:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

เมื่อฉันพบข้อผิดพลาดครั้งแรกฉันคิดว่าเป็นเพราะฉันไม่ได้ส่งผ่านอินเทอร์เฟซที่กำหนดอุปกรณ์ประกอบฉากของฉัน แต่ฉันสร้างสิ่งนั้น (ดังที่คุณเห็นด้านบน) แต่ก็ยังใช้งานไม่ได้ ฉันสงสัยว่ามีบางอย่างที่ฉันขาดหายไปหรือ

เมื่อฉันแยก ChildComponent prop ออกจากโค้ดใน ContainerComponent มันจะแสดงผลได้ดี (นอกเหนือจาก ChildComponent ของฉันที่ไม่มีส่วนประกอบที่สำคัญ) แต่ใน JSX typescript ปฏิเสธที่จะคอมไพล์ ฉันคิดว่ามันอาจเกี่ยวข้องกับการตัดการเชื่อมต่อตามบทความนี้แต่ปัญหาในบทความนั้นเกิดขึ้นในไฟล์ index.tsx และเป็นปัญหากับผู้ให้บริการและฉันได้รับปัญหาจากที่อื่น

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

ดังนั้นส่วนประกอบคอนเทนเนอร์ยังคงเหมือนเดิม แต่องค์ประกอบลูกเปลี่ยนไปเล็กน้อย:

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

interface PassedProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps & PassedProps, any> {
  ...
}

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

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

หมายเหตุ:ฉันรู้ว่านี่เป็นคำตอบที่ง่ายมากและฉันก็ไม่แน่ใจว่าทำไมถึงได้ผลดังนั้นหาก React ninja ที่มีประสบการณ์มากกว่าต้องการให้ความรู้เกี่ยวกับคำตอบนี้ฉันยินดีที่จะแก้ไข

ตรวจสอบประเภทวัตถุที่เพิ่มใหม่อีกครั้ง เมื่อชนิดของวัตถุไม่ตรงตามที่คาดไว้ข้อผิดพลาดดังกล่าวจะถูกโยนทิ้ง

เช่น ประเภทของอุปกรณ์ประกอบฉากที่กล่าวถึงในส่วนประกอบต้องตรงกับประเภทของอุปกรณ์ประกอบฉากที่ส่งต่อไปยังส่วนประกอบนั้น

แทนที่จะexport default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);เลือกconnectมัณฑนากรhttps://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146

@connect((state: StoreState): Props => {
    return {
        filePaths: state.filePaths,
        filePathsCompleted: state.filePathsCompleted,
        rootDir: state.rootDir,
        activeProjectFilePathTruthTable: state.activeProjectFilePathTruthTable,
        fileTreeShown: state.fileTreeShown,
    };
})

การเชื่อมต่อถูกกำหนดไว้ที่นี่https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

ทำไม?

ดูเหมือนว่าคำจำกัดความที่คุณใช้อาจล้าสมัยหรือไม่ถูกต้อง (อาจเขียนไม่ดี)