Typescript, React ve Redux ile bir proje üzerinde çalışıyorum (hepsi Electron'da çalışıyor) ve bir sınıfa dayalı bileşeni diğerine dahil ettiğimde ve aralarında parametreleri geçirmeye çalıştığımda bir sorunla karşılaşıyorum. Kabaca konuşursak, konteyner bileşeni için aşağıdaki yapıya sahibim:

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

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

Ve alt bileşen:

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

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

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

Açıkçası ben sadece temelleri ekliyorum ve bu sınıfların her ikisinde de çok daha fazlası var ama bana geçerli kod gibi görünen şeyi çalıştırmaya çalıştığımda hala bir hata alıyorum. Aldığım tam hata:

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

Hatayla ilk karşılaştığımda, sahne donanımımı tanımlayan bir arayüzden geçmediğim için olduğunu düşündüm, ancak bunu yarattım (yukarıda görebileceğiniz gibi) ve hala çalışmıyor. Merak ediyorum, kaçırdığım bir şey mi var?

ChildComponent prop'unu ContainerComponent içindeki koddan hariç tuttuğumda, gayet iyi işliyor (ChildComponent'imin kritik bir prop'a sahip olmaması dışında), ancak JSX Typescript'te onunla birlikte onu derlemeyi reddediyor. Sanırım bu makaleye dayanarak bağlantı sarmalamayla bir ilgisi olabilir , ancak bu makaledeki sorunlar index.tsx dosyasında meydana geldi ve sağlayıcıyla ilgili bir sorundu ve sorunlarımı başka bir yerde alıyorum.

Bu yüzden bazı ilgili cevapları okuduktan sonra (özellikle bu ve bu cevap ve soruya @ basarat'ın cevabına baktıktan sonra, benim için işe yarayan bir şey bulmayı başardım. Görece yeni React gözlerime) Connect'in bir kapsayıcı bileşenine açık arabirim, bu yüzden geçmeye çalıştığı destek tarafından karıştırıldı.

Dolayısıyla, kap bileşeni aynı kaldı, ancak alt bileşen biraz değişti:

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

Yukarıdakiler benim için çalışmayı başardı. Bileşenin kapsayıcıdan beklediği prop'ların açıkça geçirilmesi çalışıyor gibi görünüyordu ve her iki bileşen de düzgün şekilde oluşturulmuştu.

NOT: Bunun çok basit bir cevap olduğunu biliyorum ve bunun NEDEN işe yaradığından tam olarak emin değilim, bu yüzden daha deneyimli bir React ninja bu cevaba biraz bilgi vermek isterse, onu düzeltmekten memnuniyet duyarım.

Bunun yerine dekoratörü export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);tercih edin https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146connect

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

Bağlantının burada tanımlandığı yer https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

Neden?

Görünüşe göre, kullandığınız tanımlar eski veya geçersiz (belki de yetersiz yazılmış).