web-dev-qa-db-fra.com

Typescript + React / Redux: la propriété "XXX" n'existe pas sur le type 'IntrinsicAttributes & IntrinsicClassAttributes

Je travaille sur un projet avec TypeScript, React et Redux (fonctionnant tous sous Electron) et j'ai rencontré un problème lorsque j'inclus un composant basé sur une classe dans un autre et que j'essaie de transmettre des paramètres. entre eux. En gros, j'ai la structure suivante pour le composant conteneur:

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

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

Et le composant enfant:

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

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

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

Évidemment, je n'inclus que les bases et il y a beaucoup plus dans ces deux classes, mais j'obtiens toujours une erreur lorsque j'essaie d'exécuter ce qui me semble être un code valide. L'erreur exacte que je reçois:

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

Lorsque j'ai rencontré l'erreur pour la première fois, je pensais que c'était parce que je ne passais pas dans une interface définissant mes accessoires, mais je l'ai créée (comme vous pouvez le voir ci-dessus) et cela ne fonctionne toujours pas. Je me demande s'il manque quelque chose

Lorsque j'exclus l'accessoire ChildComponent du code de ContainerComponent, le rendu est correct (à part que ChildComponent ne possède pas d'accessoire critique), mais avec lui, dans JSX TypeScript refuse de le compiler. Je pense que cela pourrait avoir quelque chose à voir avec le wrapping de connexion basé sur cet article , mais les problèmes dans cet article se sont produits dans le fichier index.tsx et étaient un problème avec le fournisseur, et je reçois mes problèmes ailleurs.

reactjstypescriptreduxelectronjsx
55
Protagonist

Ainsi, après avoir lu certaines réponses connexes (en particulier celle-ci et celle-ci et en regardant la réponse de @ basarat à la question, j'ai réussi à trouver quelque chose qui fonctionne pour moi. (à mes yeux relativement nouveaux React eyes]), comme Connect ne fournissait pas d'interface explicite au composant conteneur, il était donc confus par l'accessoire qu'il essayait de transmettre.

Le composant conteneur est donc resté le même, mais le composant enfant a un peu changé:

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

Ce qui précède a réussi à fonctionner pour moi. Passer explicitement les accessoires que le composant attend du conteneur semblait fonctionner et les deux composants étaient restitués correctement.

NOTE: Je sais que c'est une réponse très simpliste et je ne sais pas exactement POURQUOI cela fonctionne, donc si un _ plus expérimentéReact ninja veut laisser tomber quelques connaissances sur cette réponse, je serais heureux de la modifier.

40
Protagonist