Javascript React DnD与HOC Dragable elements throw无法设置属性'；道具'；未定义错误的定义

我正在尝试将React DnD与许多不同的可拖动元素（不同的形状等）一起使用。它们基本上都是一样的，有着相同的行为，所以我认为使用HOC是个好主意

我有以下可通过React DnD拖动的HOC组件：

import React, { Component } from "react";
import { DragSource } from "react-dnd";

// Components
import ItemTypes from "./ItemTypes";

/**
 * Implements the drag source contract.
 */
const itemSource = {
    beginDrag(props) {
        return {};
    }
};

/**
 * Specifies the props to inject into your component.
 */
function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    };
}

const DragItem = WrappedComponent => {
    return class extends Component {
        render() {
            const { isDragging, connectDragSource } = this.props;
            return connectDragSource(<WrappedComponent isDragging={isDragging} {...this.props} />);
        }
    };
};

export default DragSource(ItemTypes.BOX, itemSource, collect)(DragItem);

import React，{Component}来自“React”；
从“react dnd”导入{DragSource}；
//组成部分
从“/ItemTypes”导入项目类型；
/**
*实现拖动源合约。
*/
const itemSource={
开端（道具）{
返回{}；
}
};
/**
*指定要注入组件的道具。
*/
功能收集（连接、监视）{
返回{
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
};
}
常量DragItem=WrappedComponent=>{
返回类扩展组件{
render（）{
const{isDraging，connectDragSource}=this.props；
返回connectDragSource（）；
}
};
};
导出默认DragSource（ItemTypes.BOX、itemSource、collect）（DragItem）；

然后我有了应该实现可拖动HOC的基本元素：

import React, { Component } from "react";
import DragItem from "../DragItem";

class Box extends Component {
    render() {
        return (
            <div
                style={{
                    height: "50px",
                    width: "50px",
                    background: "red"
                }}
            />
        );
    }
}

export default DragItem(Box);

import React，{Component}来自“React”；
从“./DragItem”导入DragItem；
类框扩展组件{
render（）{
返回(
);
}
}
导出默认DragItem（框）；

以下是将两者联系在一起的DnD上下文：

import React, { Component } from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

// Components
import DropContainer from "./dragNDropUploader/DropContainer";
import Box from "./dragNDropUploader/types/Box";

class UploadTest extends Component {
    render() {
        return (
            <div className="body_container padded_top padded_bottom">
                <DropContainer />
                <Box />
            </div>
        );
    }
}

export default DragDropContext(HTML5Backend)(UploadTest);

import React，{Component}来自“React”；
从“react dnd”导入{DragDropContext}；
从“react-dnd-html5-backend”导入html5后端；
//组成部分
从“/dragNDropUploader/DropContainer”导入DropContainer；
从“/dragNDropUploader/types/Box”导入框；
类UploadTest扩展了组件{
render（）{
返回(
);
}
}
导出默认DragDropContext（HTML5Backend）（上传测试）；

我在开发工具控制台中得到以下信息：

react.development.js:233未捕获类型错误：无法设置未定义的属性“props”

我不完全确定我做错了什么。如果我从

DragItem

HOC中删除了DnD内容，那么事情会按预期显示（当然不能拖动）。但如果我尝试实现我所拥有的DnD，它就会崩溃并死亡

---

请告诉我：）

这就是我如何定义可拖动组件的

render（）

return (
    <div
        onClick={(e) => this.handleClick(e)}
        onDragStart={(e) => this.handleDragStart(e)}
        onDrop={(e) => this.handleDragDrop(e)}
        onDragEnter={(e) => this.handleDragEnter(e)}
        onDragOver={(e) => this.handleDragOver(e)}
        onDragLeave={(e) => this.handleDragLeave(e)}
        draggable={true}
    >Draggable Div</div>
);

除了

handleDragStart（e）

处理程序之外，它不会取消事件或返回false。您可以在任何处理程序中放入任何类型的逻辑

这种“杀伤力”很大程度上是因为各种浏览器处理拖放的方式，例如，如果你在Chrome中将元素A拖到元素B上，什么都不会发生

我在npm等公司试用过的软件包有一半以上根本不起作用。人们必须将NPM软件包视为下载了SourceForge项目——几乎可以100%保证所有功能都能完美工作。因此，我不确定您下载的特定HOC有什么问题，但我希望这10行代码与您发布的3页代码一样容易理解

handleDragEnter(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
}