Reactjs ReactDnd拖动预览-查找正确的图案

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

下面是一些代码：当前不起作用--不确定如何链接它，以便拖动项目的预览显示[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);

import React，{Component}来自'React'；
从'react dnd'导入{DragDropContext，DragSource，DropTarget，DragLayer}；
从'react-dnd-html5-backend'导入html5后端，{getEmptyImage}；
常量类型={
项目：“项目”
};
类项扩展组件{
componentDidMount（）{
this.props.connectDragPreview（getEmptyImage（））；
}
render（）{
const{name，connectDragSource，isDraging}=this.props；
返回connectDragSource(
{name}
)
);
}
};
const DraggableItem=DragSource（types.Item，
{
开端（道具）{
const{name}=props；
返回{
名称
};
}
},
（连接，监视器）=>{
返回{
connectDragSource:connect.dragSource（），
connectDragPreview:connect.dragPreview（），
isDraging:monitor.isDraging（）
};
}
)（项目1）；
常量项预览=（{item，isDraging}）=>{
如果（！IsDraging）
返回null；
返回(
[{item？item.name:null}]
)
};
const ItemLayer=DragLayer(
监视器=>{
返回{
IsDraging:monitor.IsDraging（），
项：monitor.getItem（）
};
}
)（项目预览）；
常量Dnd=（）=>{
返回(
{/*显然错了。*/}
);
};
导出默认DragDropContext（HTML5Backend）（Dnd）；

---

值得一提的是，到目前为止，我发现ReactDnd非常易于使用和利用。这是一个预览部分，我认为可以从进一步的文档中受益，我很高兴在我对这一切的工作原理有了更透彻的了解后再添加它。

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

一旦这些措施到位，一切都会顺利进行