javascript - 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

这通常发生在父组件中存在变换属性(示例变换:比例(0.9))时。

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

因此，我们要么必须删除包装拖放组件的变换属性，要么只用静态覆盖位置属性。

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