React-dnd 元素样式不会在拖动时更新

Question

我已调整 react-dnd sortable example 以在我的应用程序内部使用。

我无法让 "opacity" 跟随我的拖动。

当我最初选择元素时应用不透明度：

但是当我向上移动它来改变位置时，不透明度仍然应用于原始 DOM 元素（？）。

状态相应更改，与此状态关联的 table 中的列正在重新排序。所以除了不透明度之外，其他一切都工作正常。

当我四处移动元素时，只有 li 的值发生变化，但 data-reactid 没有改变位置。

我的应用程序的唯一区别是我管理状态的方式。在我的应用程序中，状态是通过 redux 管理的。

传入DropTarget的hover函数基本上就是从例子中复制粘贴过来的

SortableColumnEntry 组件：

class SortableColumnEntry extends Component {
  render(){
    const { connectDragSource, connectDropTarget } = this.props
    const { column, isDragging, index } = this.props

    const opacity = isDragging ? 0 : 1

    const element = connectDropTarget(connectDragSource(
      <li
        style={{opacity: opacity}}</li>
    ))

    return element
  }
}

export default flow(
  DragSource(DragTypes.COLUMN, source, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })),
  DropTarget(DragTypes.COLUMN, target, (connect) => ({
    connectDropTarget: connect.dropTarget()
  }))
)(SortableColumnEntry)

Answer 1

好的，我终于整理好了。

我从父组件传入的 key 值有问题。

我曾经将 key 基于随元素变化的索引。

我以前就是这样做的：

const columnTags = columns.map(
  (column, index) => 
    <SortableColumnEntry 
    key={index} 
    index={index}
    column={column} />)

当我更改它以保持唯一性并与状态关联时：

const columnTags = columns.map(
  (column, index) => 
    <SortableColumnEntry 
      key={column} 
      index={index}
      column={column} />)

一切都开始奏效了。

目前 column 值是唯一的并且与单个条目关联 - 稍后最好将 id 字段添加到状态。

React-dnd 元素样式不会在拖动时更新

React-dnd element style is not updated on drag move

drag-and-drop

reactjs

redux

react-dnd