The example is:
return connectDragSource(connectDropTarget(
<div style={{ ...style, opacity }}>
{text}
</div>
));
But using the alternative ways to connect, such a passing ref (using innerRef because I'm using styled-components
), if I do:
return (
<MyElement
innerRef={instance => connectDragSource(connectDropTarget(findDOMNode(instance)))}
style={{ ...style, opacity }}
>
{text}
</MyElement>
);
Only the inner call works (in this case, connectDropTarget
, but if I swap connectDropTarget
and connectDragSource
, then only connectDragSource
will work).
This works, though:
return (
<MyElement
innerRef={instance => {
const domNode = findDOMNode(instance)
connectDragSource(domNode)
connectDropTarget(domNode)
}}
style={{ ...style, opacity }}
>
{text}
</MyElement>
);
Any reason why?
Any news on this issue ?
It would be great if React DnD works with Styled-Components (with innerRef) and not only native div elements.
I wonder how this is happening, because the connector functions are supposed to return a cloned ReactElement, and it's weird that it works fine in a rendering context. Interested to hear the explanation if any should happen to appear. :-)
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
Most helpful comment
Any news on this issue ?