Styled components 如果dragSource也是dropTarget，如何将React DnD与样式化组件一起使用？

我已经找到了这个问题 但在我的特殊情况下，它对我没有帮助，因为我的dragSource也是我的dropTarget

像这样：

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

类MyComponent扩展组件{
...
render（）{
const{connectDragSource，connectDropTarget，…}=this.props；
返回(
连接数据源&&
connectDropTarget&&
连接数据源(
connectDropTarget(
福
)
)
);
}
}

---

所以问题是：如何使用innerRef调用我的connectDragSource和我的connectDropTarget。

您可以使用组件的

innerRef

来获取DOM节点

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

类MyComponent扩展组件{
render（）{
const{connectDragSource，connectDropTarget}=this.props；
返回(
连接数据源&&
connectDropTarget
{
这个.props.connectDragSource（ref）；
此.props.connectDropTarget（参考）；
}}>
福
);
}
}