Reactjs 从组件A到组件B的可拖动项目

是否可以呈现不同组件中的列，并能够从B->A和A->B拖动项目

组件A中始终有1列，组件B中始终有1+列。我不知道该怎么做？我需要两个DragDropContext到A和B中的一个吗？有人能给我一些指导我如何才能做到这一点吗

以下是一个工作示例：

目前，这可能是组件B，但是如果我尝试实现组件A，如何在两者之间移动项目

---

根据文档，您不需要在同一父层次结构中有多个

DragDropContext

所以对于您的用例，我可以想象它看起来像这样

<App>
   <ComponentA />

   <ComponentB />
</App>

---

这是一个关于层次结构外观的高级概述。（由

列

的

JSX

返回的顶级comp可以是

可拖放的

。就像其他组件一样。）

您不需要重新发明轮子。得到这个：在codesandbox中查看我的初始数据。如果我只需要组件a中的一列，你会说我需要一个新的InitialData2={…}吗？@Freddy。不是真的。只要你有一个任务属于哪一列的映射，一个对象就足够了。这就是键taskIds:['task-1'，'task-2'，'task-3'，'task-4']的原因，该键声明

列1

列出了以下任务，但在当前实现中却是如此。我使用map（）函数映射以填充组件B中的所有列。如果我对组件A执行相同操作，则会有多个列。所以说了这些，我可能需要另一个对象，它只有一列数据结构相同，但是它仍然允许我移动A->B和B->A@Freddy这完全取决于您想要使用的数据结构。如果不同的对象之间有关联，那就取决于你如何想象它。你可以用一个对象或多个对象做同样的事情，然后用某种方式进行映射。是的，我现在明白了。感谢您的高层概述。

   <App>
      <DragDropContext>
         <Droppable>
           <ComponentA>
              <Draggable>
                <Column />
              </Draggable>
           </ComponentA>
         </Droppable>

         <Droppable>
           <ComponentB>
              <Draggable>
                <Column />
              </Draggable>

              <Draggable>
                 <Column />
              </Draggable>
           </ComponentB>
         </Droppable>
    </App>