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？

1 个答案: