CODEWITHSUNDEEP
styled-componentsreact-dnd
Melchior
Melchior

Reputation: 175

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

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.

Upvotes: 0

Views: 434

Answers (1)

Spline
Spline

Reputation: 38

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>
    );
  }
}

Upvotes: 1

Related Questions