react-beautiful-dnd置于Material UI Popper内拖拽元素消失问题求助

问题原因 #

该异常是Material-UI Popper组件的默认挂载逻辑与react-beautiful-dnd的拖拽渲染机制冲突导致的，可通过以下方案解决：

解决方案 #

• 给Popper组件添加disablePortal属性，禁用Portal挂载特性，让Popper内容直接渲染在当前父组件的DOM节点树下，避免跨DOM层级的定位计算冲突，这是该场景下最高概率解决问题的方案。
• 若添加disablePortal后仍存在问题，可额外给Popper添加keepMounted={true}属性，避免拖拽交互触发Popper内容的卸载重渲染，保证拖拽过程中DOM节点稳定。
• 检查拖拽相关代码的属性绑定是否完整：Droppable组件需要将provided.innerRef和provided.droppableProps绑定到包裹容器上，Draggable组件必须传入唯一的draggableId和对应下标index，同时要将拖拽相关的props绑定到实际渲染的条目节点上。

修正后的代码示例 #

<Popper
  disablePortal
  keepMounted={true}
  // 保留你原有Popper的其他配置属性，比如anchorEl、open等
>
  {({ TransitionProps }) => (
    <DragDropContext onDragEnd={this.onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided, snapshot) => (
          <div 
            ref={provided.innerRef}
            {...provided.droppableProps}
          >
            {icons.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {/* 原有菜单条目的渲染逻辑 */}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  )}
</Popper>

内容的提问来源于stack exchange，提问作者Reis