Website-Suche

reactjs - Typescript + React/Redux: Eigenschaft „XXX“ existiert nicht im Typ 'IntrinsicAttributes & IntrinsicClassAttributes'

Ich arbeite an einem Projekt mit Typescript, React und Redux (alles läuft in Electron), und ich bin auf ein Problem gestoßen, als ich eine komponentenbasierte Klasse in eine andere einfüge und versuche, Parameter zwischen ihnen zu übergeben. Grob gesagt habe ich die folgende Struktur für die Container-Komponente:

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

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

Und die Kindkomponente:

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

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

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

Offensichtlich nehme ich nur die Grundlagen auf und es gibt viel mehr zu beiden Klassen, aber ich erhalte immer noch einen Fehler, wenn ich versuche, etwas auszuführen, das für mich wie gültiger Code aussieht. Der genaue Fehler, den ich erhalte:

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

Als ich den Fehler zum ersten Mal bemerkte, dachte ich, es läge daran, dass ich kein Interface übergab, das meine Props definiert, aber ich habe dieses erstellt (wie Sie oben sehen können) und es funktioniert immer noch nicht. Ich frage mich, ob mir etwas entgeht?

Wenn ich die ChildComponent-Prop im Code der ContainerComponent ausschließe, wird sie problemlos gerendert (abgesehen davon, dass meine ChildComponent eine wichtige Prop nicht hat), aber wenn sie im JSX enthalten ist, weigert sich Typescript, es zu kompilieren. Ich glaube, es könnte etwas mit dem connect-Wrap zu tun haben, basierend auf diesem Artikel, aber die Probleme in diesem Artikel traten in der index.tsx-Datei auf und waren ein Problem mit dem Provider, und meine Probleme treten woanders auf.

Antwort #1

Also nachdem ich einige verwandte Antworten durchgelesen habe (insbesondere diese hier und diese hier) und mir @basarat's Antwort auf die Frage angesehen habe, habe ich etwas gefunden, das für mich funktioniert. Es sieht so aus (für meine relativ neuen React-Augen), als hätte Connect dem Container-Komponenten keine explizite Schnittstelle bereitgestellt, weshalb es von der Prop, die es zu übergeben versuchte, verwirrt war.

Also blieb die Container-Komponente gleich, aber die Kind-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 für mich funktioniert. Das explizite Weitergeben der Props, die die Komponente vom Container erwartet, schien zu funktionieren, und beide Komponenten wurden korrekt gerendert.

HINWEIS: Ich weiß, dass dies eine sehr vereinfachte Antwort ist und ich mir nicht genau sicher bin, WARUM das funktioniert, also wenn ein erfahrenerer React-Ninja etwas Wissen zu dieser Antwort beitragen möchte, würde ich es gerne anpassen.

Antwort #2

Was bei mir funktionierte, war einfach, den Kind-Component-Typ von React.FC zu JSX.Element zu ändern

Vor (Warnung)

const Component: React.FC = () => {

Nach (keine Warnung)

const Component = (): JSX.Element => {

Verwandte Artikel