Estoy trabajando en un proyecto con Typescript, React y Redux (todos ejecutándose en Electron), y me he encontrado con un problema cuando incluyo un componente basado en clases en otro y trato de pasar parámetros entre ellos. Hablando libremente, tengo la siguiente estructura para el componente contenedor:
class ContainerComponent extends React.Component<any,any> {
..
render() {
const { propToPass } = this.props;
...
<ChildComponent propToPass={propToPass} />
...
}
}
....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);
Y el componente hijo:
interface IChildComponentProps extends React.Props<any> {
propToPass: any
}
class ChildComponent extends React.Component<IChildComponentProps, any> {
...
}
....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);
Obviamente, solo incluyo lo básico y hay mucho más en ambas clases, pero sigo recibiendo un error cuando intento ejecutar lo que me parece un código válido. El error exacto que obtengo:
TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.
Cuando encontré el error por primera vez, pensé que era porque no estaba pasando una interfaz que definiera mis accesorios, pero lo creé (como puede ver arriba) y todavía no funciona. Me pregunto, ¿hay algo que me esté perdiendo?
Cuando excluyo el accesorio ChildComponent del código en el ContainerComponent, se muestra bien (aparte de que mi ChildComponent no tiene un accesorio crítico) pero con él en JSX Typecript se niega a compilarlo. Creo que podría tener algo que ver con la envoltura de conexión basada en este artículo. , pero los problemas en ese artículo ocurrieron en el archivo index.tsx y fueron un problema con el proveedor, y tengo mis problemas en otra parte.
React.Props
ha sido desaprobado!