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.
React.Props
aber veraltet !!Ziehen Sie stattdessen
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);
denconnect
Dekorateur https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146 vorHier 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).
quelle
connect<{}, {}, PassedProps>
Dabei ist PassedProps die Requisite, die die Komponente aus ihrem übergeordneten Container erhält.