React-dnd: 実際にドラッグされた要素に基づいてプレビューのサイズを変更するにはどうすればよいですか？

DragLayerのドキュメントを調べてください（http://gaearon.github.io/react-dnd/examples-drag-around-custom-drag-layer.html）

同様の問題があります-ドラッグプレビュー用の画像を提供したいのですが、dndが大きくなりすぎています-connectDragPreviewに渡す前に、幅/高さおよびstyle.w / hで画像サイズを設定してみましたが効果はありません。 ドキュメントを調べましたが、プレビュー画像のサイズ変更についての言及が見つかりませんでした。 この場合、画像を表示する実際のhtml要素は、ライブラリコンポーネントの奥深くに埋め込まれているため、簡単にアクセスすることもできません。したがって、最も簡単な解決策は、connectDragPreview / dragPreviewでサイズ変更オプションを公開できるかどうかです（または、渡された画像）。

動作しないコードを次に示します。onload関数でもsetDragImage関数でも、画像の幅と高さを設定しても効果はありません。

componentDidMount =（）=> {
this.setDragImage（）;
};

componentDidUpdate =（）=> {
this.setDragImage（）;
};

setDragImage =（）=> {
const image = new Image（）;
image.src = this.props.imgUrl;
image.onload =（）=> {
image.width = image.height = 35;
this.props.connectDragPreview（image）;
}
};

この問題に関する更新はありますか？

あなたはモニターアイテムの上でそれを達成することができます。

モニターアイテムを定義するために使用されるbeginDragのDragSource仕様では、3番目の引数としてreactコンポーネントインスタンスを取得し、それをアイテムに追加します。 後で、 findDOMNodeを使用すると、実際のノードを取得できます。

したがって、最初にコンポーネントインスタンスをアイテムに追加します。

  beginDrag({ id }, monitor, component) {
    return {
      id,
      component
    };
  },

後でDragLayerで、アイテムが必要になります。

const CustomDragLayer = DragLayer(monitor => ({
  item: monitor.getItem(),
  isDragging: monitor.isDragging() // useful
}))(CustomDragLayer);

これで、CustomDragLayer小道具で、コンポーネントを持つアイテムを受け取ります。

class CustomDragLayer extends Component {
  constructor(props) {
    super(props);
    this.width;
    this.height;

    // Now you can eacily get height or width from node 
    const node = findDOMNode(props.item.component);
    console.log(node.clientWidth);
  }
...

どのように注意してくださいfindDOMNodeであるconstructor 、それはで使用することはできませんrenderと、ほとんどの場合、実際の必要はありませんが、ドラッグソースは、おそらく静的な大きさを持っています。

@MrBr 、動作してくれてありがとう。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。