How to use React DnD with styled component if the dragSource is also the dropTarget?

Question

I have already found this question How to use React DnD with styled component? but In my particular case, it does not help me, because my dragSource is also my dropTarget.

like this:

class MyComponent extends Component {
...
  render() {
    const { connectDragSource, connectDropTarget, ... } = this.props;
    return (
      connectDragSource &&
      connectDropTarget &&
      connectDragSource(
        connectDropTarget(
          <MyStyledComponent>
            <h1>foo</h1>
          </MyStyledComponent>
        )
      )
    );
  }
}

So the question is: how can I use innerRef to call my connectDragSource AND my connectDropTarget.

Answer 1

You can use component's innerRef to get DOM node.

class MyComponent extends Component {
  render() {
    const { connectDragSource, connectDropTarget } = this.props;
    return (
      connectDragSource &&
      connectDropTarget 
        <MyStyledComponent
          innerRef={ref => {
            this.props.connectDragSource(ref);
            this.props.connectDropTarget(ref);
          }}>
          <h1>foo</h1>
        </MyStyledComponent>
    );
  }
}