Better Solution
A better solution is to just wrap your draggable component with a div
, define a ref on that and pass it to the draggable component, i.e.
<div key={key} ref={node => { this.node = node; }}>
<MyComponent
node={this.node}
/>
</div>
and MyComponent
is wrapped in DragSource
. Now you can just use
hover(props, monitor, component) {
...
props.node && props.node.getBoundingClientRect();
...
}
(props.node &&
is just added to avoid to call getBoundingClientRect
on an undefined object)
Alternative for findDOMNode
If you don't want to add a wrapping div
, you could do the following.
The reply of @imjared and the suggested solution here don't work (at least in react-dnd@2.3.0
and react@15.3.1
).
The only working alternative for findDOMNode(component).getBoundingClientRect();
which does not use findDOMNode
is:
hover(props, monitor, component) {
...
component.decoratedComponentInstance._reactInternalInstance._renderedComponent._hostNode.getBoundingClientRect();
...
}
which is not very beautiful and dangerous because react
could change this internal path in future versions!
Other (weaker) Alternative
Use monitor.getDifferenceFromInitialOffset();
which will not give you precise values, but is perhaps good enough in case you have a small dragSource. Then the returned value is pretty predictable with a small error margin depending on the size of your dragSource.