reactjs - react hoc en typescript

Describo HOC como en este artículo: https://medium.com/@jrwebdev/react-higher-order-component-patterns-in-typescript-42278f7590fb

Mi código (HOC):

import * as React from 'react';
import Dropzone from 'react-dropzone'


export const addImage = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
  return class extends React.Component {

    render() {

      return <Dropzone noClick onDrop={()=>{console.log('drop')}}>
        {({ getRootProps, getInputProps }) => (

            <div {...getRootProps()} onClick={()=>{console.log('aa')}}>
              <input {...getInputProps()} />
              <WrappedComponent {...this.props} />;
      </div>

        )}

      </Dropzone>

    }
  };
}

En otro componente:

addImage(<Img src={item} />)

Error en HOC: '{ children?: ReactNode; }' es asignable a la restricción del tipo 'P', pero 'P' podría ser instanciado con un subtipo diferente de la restricción 'object'

¿Cómo arreglar el error?

Respuesta #1

Creo que necesitas especificar el tipo de las props de la clase que estás devolviendo desde addImage:

export const addImage = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
  return class extends React.Component<P> { // <- The "<P>" is the missing part

Eso debería eliminar la advertencia en tu captura de pantalla. Pero a partir de ahí, Alejandro Garcia Anglada tiene razón en todos sus comentarios sobre cómo exactamente usar luego el HOC.

Respuesta #2

En tu caso, necesitarás envolver tu componente de esta manera.

1. Teniendo una referencia al componente de React que deseas envolver:

const Image = ({ item }) => <Img src={item} />

2. Pasando la referencia al HOC con el argumento. Como puedes ver en tu código arriba, tu HOC está esperando un argumento P y ese argumento es el tipo de las props que estás pasando a Image

type Props = {
  item: string
}

addImage<Props>(Image)