时间戳

首页 > 解决方案 > 在 Reactjs 中实现拖放组件的问题

javascript - 在 Reactjs 中实现拖放组件的问题

问题描述

我需要构建一个 dnd 组件，当最后一个被删除时，它将保留来自另一个父级的附加子组件

已经实现了几个组件。结构基本上是这样的：

(simplified)

<Droppable/> // takes children via dnd and does stuff on them
<Pagination/> // provides subsets of data on a client-side, sets navigation
<List> // renders items
  <Draggable> //takes only props.children
    ...
    <Item/> might be processed in <Droppable/>
    ...
  <Draggable/>
<List/>

/---------------------------------------------------- ----------------------/

import React from "react";

const Droppable = props => {
  const drop = e => {
    e.preventDefault();
    const data = e.dataTransfer.getData("transfer");
    e.target.appendChild(document.getElementById(data)); 
  };

  const allowDrop = e => {
   e.preventDefault();
  };
  return (
    <div onDrop={drop} onDragOver={allowDrop} className="droppable">
      {props.children}
    </div>
  );
};

export default Droppable;

/ -------------------------------------------------- ---------------------- /

import React from "react";

const Draggable = props => {
  const drag = e => {
    e.dataTransfer.setData("transfer", e.target.id);
  };

  const preventDrop = e => {
    e.stopPropagation();
  };

  return (
    <div
      id={props.id}
      draggable="true"
      onDragStart={drag}
      onDragOver={preventDrop}
    >
      {props.children}
    </div>
  );
};

export default Draggable;

e.target.appendChild(data) 按预期工作，直到 List 得到一个新的数据子集并渲染它，然后出现两个问题：

  1. React 想要从 Droppable 中卸载附加组件
  2. 它失败并崩溃，并出现“DOMException：无法在 'Node' 上执行 'removeChild'：要删除的节点不是该节点的子节点。” 错误

e.target.appendChild(document.importNode(document.getElementById(data), true)) 没有错误但会复制并且不会从列表中删除子项

在 reactjs 中有没有直接解决这个任务的方法？

标签： javascriptreactjs

解决方案

推荐阅读