react-beautiful-dnd draggable 在拖动过程中不可见

Question

我正在使用 react-beautiful-dnd 创建一个类似 trello 的组件，但是在拖动过程中可拖动对象不可见，我正在努力找出原因。

在此处查看 gif

这是相关的代码： here

我觉得这可能与它有关

<Draggable
  draggableId={this.props.task.id}
  index={this.props.index}
>
  {(provided, snapshot) =>
    <div className={this.getClassName(snapshot.isDragging)}
      {...provided.draggableProps}
      ref={provided.innerRef}
      onClick={this.toggleDialog}
    >
      //etc
    </div>
  )}
</Draggable>

但我很难过

Answer 1

这通常发生在父组件中存在变换属性（示例变换：scale(0.9)）时。

因此，默认位置属性 fixed 无法按预期工作。

因此，我们要么删除包裹拖放组件的 transform 属性，要么只用静态覆盖 position 属性。

<div className={this.getClassName(snapshot.isDragging)}
  {...provided.draggableProps}
  ref={provided.innerRef}
  style={{ ...provided.draggableProps.style, position: 'static' }}
  onClick={this.toggleDialog}
>