Ich arbeite an einem Projekt mit Typescript, React und Redux (alle in Electron) und bin auf ein Problem gestoßen, wenn ich eine klassenbasierte Komponente in eine andere einbeziehe und versuche, Parameter zwischen ihnen zu übergeben. Ich habe die folgende Struktur für die Containerkomponente:

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

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

Und die untergeordnete Komponente:

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

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

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

Natürlich schließe ich nur die Grundlagen ein und es gibt viel mehr in diesen beiden Klassen, aber ich erhalte immer noch eine Fehlermeldung, wenn ich versuche, etwas auszuführen, das für mich wie gültiger Code aussieht. Der genaue Fehler, den ich bekomme:

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

Als ich zum ersten Mal auf den Fehler stieß, dachte ich, dass ich keine Schnittstelle übergeben habe, die meine Requisiten definiert, aber ich habe das erstellt (wie Sie oben sehen können) und es funktioniert immer noch nicht. Ich frage mich, fehlt mir etwas?

Wenn ich die ChildComponent-Requisite aus dem Code in der ContainerComponent ausschließe, wird sie einwandfrei gerendert (abgesehen davon, dass meine ChildComponent keine kritische Requisite hat), aber mit ihr weigert sich JSX Typescript, sie zu kompilieren. Ich denke, es könnte etwas mit dem auf diesem Artikel basierenden Connect-Wrapping zu tun haben , aber die Probleme in diesem Artikel sind in der Datei index.tsx aufgetreten und waren ein Problem mit dem Anbieter, und ich bekomme meine Probleme woanders.

Nachdem ich einige verwandte Antworten gelesen hatte (insbesondere diese und diese und die Antwort von @ basarat auf die Frage), gelang es mir, etwas zu finden, das für mich funktioniert. Es sieht (für meine relativ neuen React-Augen) so aus, als würde Connect keine liefern explizite Schnittstelle zur Containerkomponente, daher wurde sie durch die Requisite verwirrt, die sie zu übergeben versuchte.

Die Containerkomponente blieb also gleich, aber die untergeordnete Komponente änderte sich ein wenig:

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

Das oben genannte hat es geschafft, für mich zu arbeiten. Das explizite Übergeben der Requisiten, die die Komponente vom Container erwartet, schien zu funktionieren, und beide Komponenten wurden ordnungsgemäß gerendert.

HINWEIS: Ich weiß, dass dies eine sehr vereinfachte Antwort ist, und ich bin mir nicht ganz sicher, WARUM dies funktioniert. Wenn also ein erfahrener React-Ninja etwas Wissen über diese Antwort verlieren möchte, würde ich sie gerne ändern.

Ziehen Sie stattdessen export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);den connectDekorateur https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146 vor

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

Hier wird die Verbindung definiert: https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

Warum?

Die von Ihnen verwendeten Definitionen scheinen wahrscheinlich veraltet oder ungültig zu sein (möglicherweise schlecht verfasst).