reactjs - Typescript+React/Redux: La propiedad "XXX" no existe en el tipo ''IntrinsicAttributes & IntrinsicClassAttributes

electron jsx

Question

Estoy trabajando en un proyecto con Typescript, React y Redux (todos ejecutándose en Electron), y tengo un problema cuando incluyo un componente basado en clase en otro y trato de pasar parámetros entre ellos. En términos generales, 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 estas dos clases, pero aún así recibo un error cuando intento ejecutar lo que me parece un código válido. El error exacto que estoy recibiendo:

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

Cuando me encontré con el error por primera vez, pensé que era porque no pasaba por una interfaz que definía mis accesorios, pero creé eso (como puedes ver arriba) y aún no funciona. Me pregunto, ¿hay algo que me esté perdiendo?

Cuando excluyo la propuesta de ChildComponent del código en ContainerComponent, queda bien (aparte de que mi ChildComponent no tiene una propiedad crítica) pero con ella en el JSX Typescript se niega a compilarla. Creo que podría tener algo que ver con el ajuste de conexión basado 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 obtengo mis problemas en otros lugares.

Answer 1

En lugar de export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent); , prefiera el decorador de connect 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,
};
})

Donde se define la conexión aquí https://github.com/alm-tools/alm/blob/00f2f94efd3810af8a80a49f968c2ebdeb955399/src/typings/react-redux/react-redux.d.ts#L6-L36

¿Por qué?

Parece que las definiciones que está utilizando probablemente estén desactualizadas o no sean válidas (quizás de mala creación).

Answer 2

Entonces, después de leer algunas respuestas relacionadas (específicamente esta y esta y ver la respuesta de @ basarat a la pregunta, logré encontrar algo que me funciona. Parece (para mis ojos React relativamente nuevos) que Connect no estaba proporcionando una Interfaz explícita con el componente contenedor, por lo que se confundió con la propiedad que intentaba pasar.

Así que el componente contenedor se mantuvo igual, pero el componente hijo cambió un poco:

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

Lo anterior logró trabajar para mí. Pasar explícitamente los accesorios que el componente espera del contenedor parece funcionar y ambos componentes se representan correctamente.

NOTA: Sé que esta es una respuesta muy simplista y no estoy exactamente segura de POR QUÉ funciona, por lo que si un ninja React con más experiencia quiere dejar algo de conocimiento sobre esta respuesta, me encantaría enmendarla.