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

Question

我已经修改了react-dnd 可排序示例,以便在我的应用程序中使用.

我不能让"不透明"跟随我的拖累.

当我最初选择元素时,应用了不透明度:

但是当我向上移动以改变位置时,不透明度仍然应用于原始DOM元素(？).

状态相应地更改,与此状态关联的表中的列正在重新排序.因此,除了不透明之外,其他一切都很好.

当我移动元素时,只有li的值被改变但是data-reactid没有改变位置.

我的应用程序的唯一区别是我如何管理状态.在我的应用程序中,状态通过redux进行管理.

将hover被传递给该DropTarget的功能基本上是从示例复制和粘贴.

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字段添加到该状态将是一件好事.