В MyDropTarget
компоненте мне нужен доступ к узлу источника перетаскивания. Я предполагаю, что мне нужно вернуть эту информацию в функции beginDrag
в DragSource
.
@DragSource("key", {
beginDrag(props, monitor, component) {
return {
draggedId: props.id,
// is it possible to access component DOM node here?
// node: component.???
}
}
}, ...)
class MySourceComponent extends Component {
render() {
return this.props.connectDragSource(
<div>This DOM node should be passed into drag target</div>
)
}
}
И в компоненте MyDropTarget
я ожидаю получить доступ к этой информации через monitor.getItem()
@DropTarget("key", {...}, (connect, monitor) => {
return {
draggedNode: monitor.getItem().node,
...
}
})
class MyTargetComponent extends Component {
...
}
Я думаю, мне нужно как-то использовать refs
в MySourceComponent
. Но когда я создаю ссылку, она не появляется в параметре component
метода beginDrag
:
@DragSource("key", {
beginDrag(props, monitor, component) {
// component.node === undefined ¯\_(ツ)_/¯
}
}, ...)
class MySourceComponent extends Component {
render() {
return this.props.connectDragSource(
<div ref={node => this.node = node}>The size of this node should be measured and passed into drag target</div>
)
}
}
Возможно, я не вижу чего-то очевидного. Он думал, что это будет простая задача, пока я не попытался ее реализовать. Или может быть преднамеренно ограничена передача информации DOM от источника к цели? На самом деле, мне не нужен сам узел DOM. Мне нужен размер узла, потому что моя цель адаптируется к размеру перетаскиваемого элемента.