错误“类型‘typeof WithXXX’中缺少属性‘类型’”

Question

我正在使用带有 Typescript 的 React，并尝试基于 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)

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]

我不确定我是否错误地使用了高阶组件，或者它只是一个类型主题。不幸的是，我没有找到将 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)

Answer 1

看来你的逻辑有点不对。 DragSource 需要一个 React 组件作为输入，但您正试图将您的 withTemplateObjectDraggable HOC 传入。因此 Typescript 抱怨类型不兼容。

我不能 100% 确定它是否会起作用，但请尝试像这样在您的 HOC 中移动 DragSource：

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