Ошибка «Свойство type» отсутствует в типе typeof WithXXX »

Question

Я использую React с Typescript и пытаюсь создать компонент более высокого порядка на основе библиотекиact-dnd.Ошибка возникает в части DragSource компонентаact-dnd.Это соответствующий код:

import React from 'react';
import { DragSource, ConnectDragSource, DragSourceConnector, DragSourceMonitor } from 'react-dnd';
import ItemTypes from './itemTypes'

const collect = (connect: DragSourceConnector, monitor: DragSourceMonitor) => {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    }
}

const templateObjectSource = {
    beginDrag(props: any) {
        return {}
    }
}

export interface TemplateObjectCollectedProps {
    canDrop: boolean
    isOver: boolean
    connectDragSource: ConnectDragSource
}

export interface TemplateObjectProps {
    name?: string
}

function withTemplateObjectDraggable(WrappedComponent: React.ComponentClass<TemplateObjectProps>) {
    return class WithTemplateObjectDraggable extends React.Component<TemplateObjectCollectedProps> {
        public render() {
            return this.props.connectDragSource(
                <div>
                    <WrappedComponent {...this.props} />
                </div>
            )
        }
    }
}

export default DragSource(ItemTypes.TEXTFIELD, templateObjectSource, collect)(withTemplateObjectDraggable)

Typescript выдает мне следующую ошибку в последней строке, особенно в части '(withTemplateObjectDraggable)':

[ts]
Argument of type '(WrappedComponent: ComponentClass<TemplateObjectProps, any>) => typeof WithTemplateObjectDraggable' is not assignable to parameter of type 'ComponentType<ComponentClass<TemplateObjectProps, any>>'.
Type '(WrappedComponent: ComponentClass<TemplateObjectProps, any>) => typeof WithTemplateObjectDraggable' is not assignable to type 'FunctionComponent<ComponentClass<TemplateObjectProps, any>>'.
Type 'typeof WithTemplateObjectDraggable' is not assignable to type 'ReactElement<any>'.
Property 'type' is missing in type 'typeof WithTemplateObjectDraggable'. [2345]

Я не уверенесли я использую компонент высшего порядка неправильно или это просто тема типа.К сожалению, я не нашел пример, который сочетает реакцию-dnd с дополнительными компонентами более высокого порядка, поэтому, возможно, я на неправильном пути.Это уже помогло бы мне, если бы вы могли предоставить мне ссылку на пример работающего машинописного текста (или javascript), который реализует компонент более высокого порядка поверх «DragSource» в Reaction-dnd, поскольку я не смог найти его.

К вашему сведению: я бы тогда использовал компонент высшего порядка, например:

import React from 'react';
import imgTextfield from '../../../../../assets/templateObjects/textfield.png'
import withTemplateObjectDraggable from './withTemplateObjectDraggable'

class Textfield extends React.Component {
    public render() {
        return (
            <span>
                <img src={imgTextfield} />
                <div> Textfield </div>
            </span>
        )
    }
}

export default withTemplateObjectDraggable(Textfield)

Answer 1

Кажется, у вас немного неправильная логика.DragSource ожидает компонент React в качестве входных данных, но вы пытаетесь передать свой withTemplateObjectDraggable HOC. Следовательно, Typescript жалуется на несовместимые типы.

Я не уверен на 100%, будет ли он работать илинет, но попробуйте переместить DragSource внутри вашего HOC следующим образом:

function withTemplateObjectDraggable(WrappedComponent: React.ComponentClass<TemplateObjectProps>) {
    class WithTemplateObjectDraggable extends React.Component<TemplateObjectCollectedProps> {
        public render() {
            return this.props.connectDragSource(
                <div>
                    <WrappedComponent {...this.props} />
                </div>,
            );
        }
    }

    return DragSource(ItemTypes.TEXTFIELD, templateObjectSource, collect)(WithTemplateObjectDraggable);
}