Javascript “错误”；财产'；类型'；类型'中缺少；带有XXX和x27的类型&引用；

我正在使用React with Typescript，并尝试基于React dnd库创建一个更高阶的组件。该错误发生在react dnd组件的DragSource部分。这是相应的代码：

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)

从“React”导入React；
从“react dnd”导入{DragSource，ConnectDragSource，DragSourceConnector，DragSourceMonitor}；
从“./ItemTypes”导入项目类型
const collect=（connect:DragSourceConnector，monitor:DragSourceMonitor）=>{
返回{
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
}
}
const templateObjectSource={
开端（道具：任何）{
返回{}
}
}
导出接口TemplateObjectCollectedProps{
坎德罗普：布尔
isOver:布尔型
connectDragSource:connectDragSource
}
导出接口TemplateObjectProps{
名称？：字符串
}
带有TemplateObjectDragable的函数（WrappedComponent:React.ComponentClass）{
返回类WithTemplateObjectDragable扩展React.Component{
公共渲染（）{
返回此.props.connectDragSource(
)
}
}
}
导出默认DragSource（ItemTypes.TEXTFIELD、templateObjectSource、collect）（WithTemplateObjectDragTable）

Typescript在最后一行给出了以下错误，特别是在“（WithTemplateObjectDragable）”部分：

[ts]
类型为“（WrappedComponent:ComponentClass）=>typeof WithTemplateObjectDragTable”的参数不可分配给类型为“ComponentType”的参数。
类型“（WrappedComponent:ComponentClass）=>typeof WithTemplateObjectDragTable”不可分配给类型“FunctionComponent”。
类型“typeof WithTemplateObjectDragable”不可分配给类型“ReactElement”。
类型“typeof WithTemplateObjectDragTable”中缺少属性“type”。[2345]

我不确定我是否错误地使用了高阶组件，或者它只是一个类型主题。不幸的是，我没有找到一个将react dnd与其他高阶组件相结合的示例，因此我可能走错了方向。如果您能为我提供一个指向工作类型脚本（或javascript）示例的链接，该示例在react dnd中的“DragSource”之上实现了一个更高阶的组件，因为我找不到

仅供参考：然后我会使用高阶组件，如下所示：

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)

从“React”导入React；
从“../../../../../assets/templateObjects/textfield.png”导入imgTextfield
从“./WithTemplateObjectDragable”导入WithTemplateObjectDragable
类Textfield扩展了React.Component{
公共渲染（）{
返回(
文本字段
)
}
}
使用TemplateObjectDragable导出默认值（文本字段）

看来您的逻辑有点错误

DragSource

需要一个React组件作为输入，但您正试图通过TemplateObjectDragTable传入

。因此，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);
}

带有TemplateObjectDragable的函数（WrappedComponent:React.ComponentClass）{
使用TemplateObjectDragable扩展React.Component初始化{
公共渲染（）{
返回此.props.connectDragSource(
,
);
}
}
返回DragSource（ItemTypes.TEXTFIELD、templateObjectSource、collect）（WithTemplateObjectDraggable）；
}
非常感谢。这就是解决办法！你简直不敢相信我找这个问题找了多久。谢谢
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);
}