Je travaille sur un projet avec Typescript, React et Redux (tous fonctionnant 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);
É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 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 pour la première fois, je pensais 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, y a-t-il quelque chose qui me manque?
Quand j'exclus le prop ChildComponent du code dans le ContainerComponent, il rend très bien (mis à part le fait que mon ChildComponent n'a pas de prop critique) mais avec lui dans le 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.
React.Props
a été obsolète !!