Как использовать React DnD со стилизованным компонентом?

Question

При переносе моего стилизованного компонента в connectDragSource я получаю следующую ошибку:

Uncaught Error: в 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

Если вы используете несколько разъемов, вы можете сделать следующее:

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

Источник: https://github.com/react-dnd/react-dnd/issues/347#issuecomment-221703726

Answer 2

Вы должны использовать innerRef Styled Component, чтобы получить базовый DOM-узел, затем вы можете вызвать к нему свой connectDragSource .

В вашем случае это должно быть так:

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

Вы также можете посмотреть на мою реализацию компонента Knight для официального учебника по шахматам. Он также доступен через CodeSandbox .