Saya sedang mengerjakan proyek dengan Typecript, React dan Redux (semua berjalan di Electron), dan saya mengalami masalah ketika saya memasukkan satu komponen berbasis kelas ke komponen lain dan mencoba untuk melewatkan parameter di antara mereka. Secara longgar, saya memiliki struktur berikut untuk komponen container:

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

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

Dan komponen anak:

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

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

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

Jelas saya hanya menyertakan dasar-dasar dan ada lebih banyak lagi untuk kedua kelas ini tetapi saya masih mendapatkan kesalahan ketika saya mencoba dan menjalankan apa yang menurut saya seperti kode yang valid. Kesalahan persis yang saya dapatkan:

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

Ketika saya pertama kali menemukan kesalahan, saya pikir itu karena saya tidak mengirimkan antarmuka yang mendefinisikan alat peraga saya, tetapi saya membuatnya (seperti yang Anda lihat di atas) dan itu masih tidak berfungsi. Saya bertanya-tanya, apakah ada sesuatu yang saya lewatkan?

Ketika saya mengecualikan prop ChildComponent dari kode di ContainerComponent, itu membuatnya baik-baik saja (selain dari ChildComponent saya tidak memiliki prop kritis) tetapi dengan itu di JSX Typescript menolak untuk mengkompilasinya. Saya pikir itu mungkin ada hubungannya dengan pembungkusan koneksi berdasarkan artikel ini , tetapi masalah dalam artikel itu terjadi di file index.tsx dan masalah dengan penyedia, dan saya mendapatkan masalah saya di tempat lain.

Jadi setelah membaca beberapa jawaban terkait (khususnya yang ini dan yang ini dan melihat jawaban @basarat atas pertanyaan tersebut, saya berhasil menemukan sesuatu yang sesuai untuk saya. Sepertinya (untuk mata React saya yang relatif baru) seperti Connect tidak menyediakan antarmuka eksplisit ke komponen kontainer, jadi itu bingung dengan prop yang coba diteruskannya.

Jadi komponen penampung tetap sama, tetapi komponen turunannya berubah sedikit:

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);

Di atas berhasil untuk saya. Meneruskan secara eksplisit props yang diharapkan komponen dari container tampaknya berfungsi dan kedua komponen dirender dengan benar.

CATATAN: Saya tahu ini adalah jawaban yang sangat sederhana dan saya tidak begitu yakin MENGAPA ini berhasil, jadi jika ninja React yang lebih berpengalaman ingin memberikan beberapa pengetahuan tentang jawaban ini, saya akan dengan senang hati mengubahnya.

Daripada export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);memilih connectdekorator 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,
    };
})

Di mana koneksi didefinisikan di sini https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

Mengapa?

Sepertinya definisi yang Anda gunakan mungkin sudah kedaluwarsa atau tidak valid (mungkin ditulis dengan buruk).