在React.js中拖放。如何在setDragImage中传递自定义react组件

Question

我在React.js中实现了拖放。如何在React.js中实现Darg和Drop中传递自定义react组件。我想让我的自定义react组件作为拖拽组件的预览图像。如何在setDragImage中传递自定义react组件。我不想要图像。

onDragStart = (e, index) => {

    this.draggedIndex = index;
    this.draggedItem = this.state.list[index];
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", e.target.parentNode);
    e.dataTransfer.setDragImage(e.target.parentNode, 20, 20);
};

预期的结果是一个自定义预览组件。

提前感谢

Answer 1

我一直在寻找同样的东西，直到我最终偶然找到了答案。希望这对某些人有帮助(TSX)：

private onDragStart(e: React.DragEvent) {
    let image: JSX.Element = (<></>); // <== whatever you want here

    var ghost = document.createElement('div');
    ghost.style.transform = "translate(-10000px, -10000px)";
    ghost.style.position = "absolute";
    document.body.appendChild(ghost);
    e.dataTransfer.setDragImage(ghost, 0, 0);

    ReactDOM.render(image, ghost); 
}

(这有点过于简单，因为您还需要在删除之后从DOM中删除ghost )。