Как получить доступ к DOM-узлу источника перетаскивания в `beginDrag? - PullRequest
0 голосов
/ 04 ноября 2019

В 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. Мне нужен размер узла, потому что моя цель адаптируется к размеру перетаскиваемого элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...