Sortable example doesn't work by passing ref

[TrevorHinesley]

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?

[noosxe]

Any news on this issue ?

[rholliger]

It would be great if React DnD works with Styled-Components (with innerRef) and not only native div elements.

[philraj]

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. :-)

[stale]

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.