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

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

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

styled-components

react-dnd