Question

在connectDragSource中包装样式化组件时，出现以下错误：

未捕获错误：现在只能将本机元素节点传递给React DnD连接器。您可以将PaneItemText__StyledItem包装成一个 <div>，或将其转换为拖动源或放置目标本身。

此消息的第一个建议是将我的样式组件包装在<div>中，但这会弄乱我的布局，并且不希望这样做。我不确定第二个选项建议的是什么 - 是否有人能够澄清？

以下是我正在做的一个粗略的例子：

import React, { Component } from 'react';
import styled from 'styled-components';
import { DragSource } from 'react-dnd';

const StyledComponent = syled.div`
...
`;

class MyComponent extends Component {
    ...
    render() {
        const { connectDragSource } = this.props;
        return connectDragSource(<StyledComponent />)
    }
}

const itemSource = {
    beginDrag(props) {
        /* code here */
    },
    endDrag(props) {
        /* code here */
    }
};

function collect(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    }
}

export default DragSource('foo', itemSource, collect(MyComponent);

Answer 1

您应该使用Styled Component＆＃39; innerRef来获取底层DOM节点，然后您可以将connectDragSource调用它。

在你的情况下，它应该是这样的：

class MyComponent extends Component {
...
    render() {
        const { connectDragSource } = this.props;
        return (
            <StyledComponent
                innerRef={instance => connectDragSource(instance)}
            />
        )
    }
}

您还可以查看我的官方国际象棋教程Knight组件的实现作为参考。它也可以通过CodeSandbox访问。

Answer 2

如果使用多个连接器，则可以执行以下操作：

<MyStyledComponent
  innerRef={instance => {
    connectDragSource(instance);
    connectDropTarget(instance);
  }}
/>

来源：https://github.com/react-dnd/react-dnd/issues/347#issuecomment-221703726

如何将React DnD与样式化组件一起使用？

2 个答案: