antd List结合react-beautiful-dnd拖拽时页面伸缩问题求助

拖拽时页面频繁收缩展开，核心原因是拖拽过程中容器或拖拽项的高度发生动态变化，比如占位符高度不匹配、拖拽项高度未固定、组件默认样式干扰等。以下是针对性的解决办法：

1. 给Droppable补全必填属性并指定方向 #

react-beautiful-dnd的Droppable必须设置唯一droppableId，同时显式指定direction可以避免布局计算错误：

<Droppable droppableId="response-properties-list" direction="vertical">

2. 固定拖拽项高度 #

给每个Draggable内部容器设置min-height，避免拖拽时元素高度波动导致容器收缩，同时保留拖拽组件自带的样式：

<div
  ref={provided.innerRef}
  {...provided.draggableProps}
  {...provided.dragHandleProps}
  style={{ 
    ...provided.draggableProps.style,
    minHeight: "60px", // 根据输入框实际高度调整
    padding: "8px 0",
    boxSizing: "border-box"
  }}
>

3. 调整Antd List默认样式 #

Antd List自带的padding和margin可能和拖拽容器冲突，同时显式指定rowKey优化渲染性能：

<List
  dataSource={arrangeResponsesProperties.filter(({ key }) => key !== "chart")}
  renderItem={/* ... */}
  style={{ margin: 0, padding: 0 }}
  rowKey="key"
/>

4. 匹配占位符高度 #

拖拽时的占位符高度如果和拖拽项不一致，会导致容器高度跳变，给占位符设置相同的min-height：

{React.cloneElement(provided.placeholder, {
  style: { minHeight: "60px" }
})}

修改后的完整代码示例 #

<DragDropContext onDragEnd={(result) => {
  // 补充拖拽结束后的顺序更新逻辑
  if (!result.destination) return;
  const items = Array.from(arrangeResponsesProperties);
  const [reorderedItem] = items.splice(result.source.index, 1);
  items.splice(result.destination.index, 0, reorderedItem);
  setArrangeResponsesProperties(items); // 假设用setState更新数据源
}}>
  <Droppable droppableId="response-properties-list" direction="vertical">
    {(provided) => (
      <div ref={provided.innerRef} {...provided.droppableProps}>
        <List
          dataSource={arrangeResponsesProperties.filter(({ key }) => key !== "chart")}
          renderItem={(responseProperty, index) => (
            <Draggable
              draggableId={responseProperty.key}
              index={index}
              key={responseProperty.key}
            >
              {(provided) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  style={{
                    ...provided.draggableProps.style,
                    minHeight: "60px",
                    padding: "8px 0",
                    boxSizing: "border-box"
                  }}
                >
                  <Row align="middle">
                    <Col span={24}>
                      <Form.Item
                        name={responseProperty.key + "~*!*$*~display_name"}
                      >
                        <Input />
                      </Form.Item>
                    </Col>
                  </Row>
                </div>
              )}
            </Draggable>
          )}
          style={{ margin: 0, padding: 0 }}
          rowKey="key"
        />
        {React.cloneElement(provided.placeholder, {
          style: { minHeight: "60px" }
        })}
      </div>
    )}
  </Droppable>
</DragDropContext>

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