如果dragSource也是dropTarget，如何使用带有样式组件的React DnD？

Question

我已经找到了这个问题 How to use React DnD with styled component? 但在我的特殊情况下，它对我没有帮助，因为我的 dragSource 也是我的 dropTarget。

像这样：

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

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

Answer 1

你可以使用组件的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>
    );
  }
}