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

Question

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

未捕获的错误：现在只能将本机元素节点传递给 React DnD 连接器。您可以将 PaneItemText__StyledItem 包装到 a 中 <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 的innerRef来获取底层 DOM 节点，然后你可以调用你的connectDragSource到它。

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

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

你也可以看看我对官方国际象棋教程的骑士组件的实现作为参考。它也可以通过CodeSandbox访问。