组件之间的 DnD

Question

有什么方法可以在组件之间拖放吗？我有两个完全相同的组件（在数据结构和 UI 方面）。第一个组件上的一个按钮扩展了第二个组件，我想在其中拖放项目。我相信仅使用 React 是无法实现的。

我觉得我快到了，但这并没有改变我被困住了。我制作了我的整个应用程序 <DragDropContext> 并 <Draggable> 编辑了必要的区域。当我将项目拖到另一个组件时，它们首先尝试在该组件的列表中占有一席之地，但它们不适合（我可能需要使用 REDUX 传递每个 Droppables 的 DroppableIds）并且它们 return 到它们的起点。

索引JS如下：

<DragDropContext onDragEnd={this.onDragEnd}>
                <div className="row">
                    <React.Fragment>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-">
                            <ContentSelector idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12 pl-0">
                            <BroadcastCreation idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12">
                            <ScreenArea idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12 pl-0">
                            <Streamed />
                        </div>
                    </React.Fragment>
                </div>
</DragDropContext>

Component1 如下：

map.map((item, index) => mapView.push(
            <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                        )}
                    >

Answer 1

通过使用道具和掉了一些头发，我设法解决了这个问题。

组件之间的 DnD

DnD Between Components

reactjs

react-dnd

react-redux

react-beautiful-dnd