使用 HOC 可拖动元素反应 DnD 引发无法设置未定义错误的属性“道具”

Posted 2023-05-08

【中文标题】使用 HOC 可拖动元素反应 DnD 引发无法设置未定义错误的属性“道具”

【英文标题】：React DnD with HOC draggable elements throw Cannot set property 'props' of undefined error

【发布时间】：2018-12-15 10:58:41

【问题描述】：

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

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

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

然后我有了应该实现可拖动 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);

这是将它们联系在一起的 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);

我在开发工具控制台中得到以下信息：react.development.js:233 Uncaught TypeError: Cannot set property 'props' of undefined

我不完全确定我做错了什么。如果我从DragItem HOC 中删除 DnD 的东西，事情会按预期显示（当然不能拖动）。但是如果我尝试像我一样实现 DnD，它就会崩溃并死掉。

请教我:)

【参考方案1】：

这就是我将如何定义可拖动组件的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>
);

对于所有这些的 ReactJS 处理程序，有这个：

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

handleDragStart(e) 处理程序除外，它不会取消事件或返回 false。您可以将任何类型的逻辑放入任何处理程序中。

这种“矫枉过正”很大程度上是因为各种浏览器如何处理拖放，例如，如果你在 Chrome 中将元素 A 拖到元素 B 上，则可能不会发生任何事情，but in Firefox, it will try to open element A as though it were a file.

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