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

Posted 2023-05-08

【中文标题】拖动移动时不更新 React-dnd 元素样式

【英文标题】：React-dnd element style is not updated on drag move

【发布时间】：2016-02-16 23:00:06

【问题描述】：

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

我无法使“不透明度”跟随我的拖动。

当我最初拾取元素时应用不透明度：

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

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

当我移动元素时，只有 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)

【参考方案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 字段添加到状态。

【讨论】：

这只是把我绊倒了。感谢您发布答案！ :)