时间戳

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

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

问题描述

我正在尝试将 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

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

请教我:)

标签： javascriptreactjsreact-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>
);

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

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

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

这种“矫枉过正”很大程度上是因为各种浏览器如何处理拖放，例如，如果你在 Chrome 中将元素 A 拖到元素 B 上，可能不会发生任何事情，但在 Firefox 中，它会尝试打开元素 A，就好像它是文件。

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

推荐阅读