ReactDndドラッグプレビュー - 正しいパターンが見つかりません

Question

デフォルトのブラウザの動作を上書きする単純なドラッグプレビューを実装しようとしていますが、正しいパターンが見つからないようで、レイヤの仕組みのより大きなコンテキストを説明せずに一連の例を示します。

ここにいくつかのコードがあります：現在は動作しません - ドラッグされたアイテムのプレビューで[アイテム]が表示され、他のアイテムでは表示されないようにリンクする方法がわかりません。このリンクを作成するにはどうすればよいですか？私はここで何が欠けていますか？

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はこの点まで非常に使いやすく、活用していました。さらなるドキュメンテーションの恩恵を受ける可能性のあるプレビュー・ピースであり、これがどのように機能するかをより完全に理解したら、私はそれを追加してうれしいです。

Answer 1

ここでの答えは、後で明白ですが、ドキュメントからはっきりとは分かりません。プレビューコンポーネント自体の（x、y）位置を、通常、インラインスタイルを使用して設定する必要がありますDragLayerコンテナのモニタから適切な位置を計算するための小道具。

これが実現すれば、すべてが機能します。