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 (tous fonctionnant en électron), et j'ai rencontré un problème quand j'incluais un composant basé sur une classe dans un autre et que j'essayais de passer des paramètres entre eux. Vaguement parlant, j'ai la structure suivante pour le composant container: 

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 ne fais qu'inclure les bases et il y a beaucoup plus à ces deux mais j'ai encore une erreur quand j'essaie d'exécuter ce qui ressemble à du code valide. L'erreur exacte que j'obtiens: 

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

quand j'ai rencontré l'erreur, j'ai pensé que c'était parce que je ne passais pas dans une interface définissant mes accessoires, mais j'ai créé cela (comme vous pouvez le voir ci-dessus) et cela ne fonctionne toujours pas. Je me demande s'il y a quelque chose que je manque?

quand j'exclus le pufcomponent prop de le code dans le ContainerComponent, il rend très bien (en dehors de mon ChildComponent n'ayant pas de proper critique) mais avec lui dans le JSX le Typescript refuse de le compiler. Je pense que cela pourrait avoir quelque chose à voir avec le connect wrapping basé sur cet article , mais les problèmes dans cet article se sont produits dans l'index.tsx et étaient un problème avec le fournisseur, et j'ai mes problèmes ailleurs.

29
demandé sur Protagonist 2017-03-07 23:32:53

2 réponses

donc après avoir lu quelques réponses connexes (spécifiquement 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. Il semble (à mes yeux relativement nouveaux réagir) que Connect ne fournissait pas une interface explicite à la composante de conteneur, donc il a été confus par l'hélice qu'il essayait de passer.

de sorte que le composant du conteneur est resté même chose, 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 à travailler pour moi. Passer explicitement les accessoires que le composant attend du conteneur semble fonctionner et les deux composants rendus 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 ninja de réaction plus expérimenté veut laisser tomber quelques connaissances sur cette réponse, je serais heureux de de la modifier.

29
répondu Protagonist 2017-05-23 11:54:27

au lieu de export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); , préférez 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,
    };
})

où connect est défini ici https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

pourquoi?

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

-3
répondu basarat 2017-03-07 21:14:30