React Dnd 拖动预览 - 找到正确的模式答案

【问题标题】：ReactDnd drag preview - finding the right patternReact Dnd 拖动预览 - 找到正确的模式
【发布时间】：2017-08-10 19:17:35
【问题描述】：

我正在尝试实现一个覆盖默认浏览器行为的简单拖动预览，但我似乎无法找到正确的模式，并且文档引用了一组简单的示例，而没有解释如何层的更大上下文工作。

这里有一些代码：目前不起作用——不知道如何链接它，以便拖动项目的预览显示 [Item] 而不是其他项目。我如何制作这个链接？我在这里错过了什么？

import React, { Component } from 'react';
import { DragDropContext, DragSource, DropTarget, DragLayer } from 'react-dnd';
import HTML5Backend, { getEmptyImage } from 'react-dnd-html5-backend';

const types = {
  Item: 'ITEM'
};

class Item extends Component {
  componentDidMount() {
   this.props.connectDragPreview(getEmptyImage());
  }

  render() {
    const { name, connectDragSource, isDragging } = this.props;
    return connectDragSource(
        <div>
          <div>
            {name}
          </div>
        </div>
      )
    );
  }
};

const DraggableItem = DragSource(types.Item,
  {
    beginDrag(props) {
      const { name } = props;
      return {
        name
      };
    }
  },
  (connect, monitor) => {
    return {
      connectDragSource: connect.dragSource(),
      connectDragPreview: connect.dragPreview(),
      isDragging: monitor.isDragging()
    };
  }
)(Item);

const ItemPreview = ({ item, isDragging }) => {
  if (!isDragging)
    return null;
  return (
    <div>[{item ? item.name : null}]</div>
  )
};

const ItemLayer = DragLayer(
  monitor => {
    return {
      isDragging: monitor.isDragging(),
      item: monitor.getItem()
    };
  }
)(ItemPreview);

const Dnd = () => {
  return (
    <div>
      <DraggableItem name="Item A" />
      <DraggableItem name="Item B" />
      <DraggableItem name="Item C" />
      <ItemLayer />  {/* Clearly wrong. */}
    </div>
  );
};

export default DragDropContext(HTML5Backend)(Dnd);

就其价值而言，到目前为止，我发现 ReactDnd 非常易于使用和利用。这是我认为可以从进一步的文档中受益的预览部分，一旦我对这一切的工作原理有了更透彻的了解，我很乐意添加它。

【问题讨论】：

标签： reactjs react-dnd

【解决方案1】：

正如我所料，这里的答案是事后看来很明显，但从文档中并不是特别清楚：必须通过通常使用道具的内联样式设置预览组件本身的 (x, y) 位置从 DragLayer 容器的监视器中计算其正确位置。

一旦到位，一切正常。

【讨论】：