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

Question

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

See gif here

这是相关代码：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)）时。

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

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

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