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

Question

Je travaille sur un projet avec Typescript, React et Redux (le tout exécuté dans 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 passer 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);

Il est évident que je n'ai inclus que les bases et qu'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, j'ai pensé que c'était parce que je ne passais pas dans une interface définissant mes props, mais je l'ai créée (comme vous pouvez le voir ci-dessus) et cela ne fonctionne toujours pas. Je me demande s'il y a quelque chose qui m'échappe ?

Lorsque j'exclue la prop du ChildComponent du code du ContainerComponent, le rendu est parfait (à part le fait que mon ChildComponent n'a pas de prop critique), mais avec la prop dans le JSX Typescript, la compilation est refusée. Je pense que cela pourrait avoir quelque chose à voir avec le connect wrapping basé sur cet article Mais les problèmes évoqués dans cet article se situaient dans le fichier index.tsx et étaient dus à un problème avec le fournisseur.

Answer 1

Après avoir lu quelques réponses connexes (notamment celui-ci et celui-ci et en regardant la réponse de @basarat à la question, j'ai réussi à trouver quelque chose qui fonctionne pour moi. Il semble (à mes yeux relativement nouveaux de React) que Connect ne fournissait pas une interface explicite au composant du conteneur, et qu'il était confus par la prop qu'il essayait de passer.

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. Le fait de passer explicitement les props que le composant attend du conteneur semble fonctionner et les deux composants s'affichent correctement.

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

Answer 2

Vérifiez les types d'objets nouvellement ajoutés. Si le type d'objet n'est pas exactement comme prévu, une erreur est générée.

Ex. Le type d'accessoires mentionné dans le composant doit correspondre au type d'accessoires transmis à ce composant.

Answer 3

Faites en sorte que votre composant enfant étende React.Component avec le type que vous voulez ou un type "quelconque". ex : " extends React.Component<any> {...} "

export class ChildComponent extends React.Component<T> {
 render() {
  return (
    <button className="square">
      {this.props.value}
    </button>
  );
 }
}

Dans le composant Parent, vous pourriez alors passer la valeur, ex :

renderSquare(i: Number) { return <ChildComponent value={i}/>; }

Vérifiez https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components/ pour plus d'informations

Answer 4

Au lieu de export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); préfèrent le connect décorateur https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/app/fileTree.tsx#L136-L146

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

La notion de connexion est définie ici https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

Pourquoi ?

Il semble que les définitions que vous utilisez sont probablement obsolètes ou invalides (peut-être mal rédigées).