为什么 react-beautiful-dnd 在一个简单的列表中拖放时会抖动？

问题描述

您会在这个 gif 中注意到，当我拖动一个项目时，周围的项目不会完全挡住，只有大约 一半挡住。然后当我跌落时，所有东西都会震动并卡入到位。这是为什么？我只有一个基本的 hello world 实现。

请注意，在第二张图片上，当我向下拖动时，下面的项目仅移动到一半位置，然后是丑陋的颠簸。我如何使它平滑，让一切都移动到正确的位置？

这基本上是我所拥有的：

const getListStyle = (isDraggingOver) => ({
  opacity: isDraggingOver ? 0.7 : 1,});

<Droppable droppableId="droppable">
  {(provided,snapshot) => (
    <div
      {...provided.droppableProps}
      ref={provided.innerRef}
      style={getListStyle(snapshot.isDraggingOver)}
    >
      {items.map((item,i) => (
        <MyItem
          key={item.id}
          data={item}
          index={i}
        />
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

const MyItem = ({ data,index }) => {
  return (
    <Draggable key={data.id} draggableId={data.id} index={index}>
      {provided => (
        <section
          {...provided.draggableProps}
        >
          <LinesIcon
            className={styles.dragHandle}
            ref={provided.innerRef}
            {...provided.dragHandleProps}
          />
          <div>content...</div>
        </section>
      )}
    </Draggable>
  )
}

我希望物品完全移开，以正确填充它们的空位，而不是中途。并摆脱颠簸。

解决方法

想通了，这是因为我将 ref 放在了错误的可拖动项上，我需要将它放在最外层的父项上，而不是嵌套项（拖动手柄）上。