O exemplo é:
return connectDragSource(connectDropTarget(
<div style={{ ...style, opacity }}>
{text}
</div>
));
Mas usando as formas alternativas de se conectar, como uma referência de passagem (usando innerRef porque estou usando styled-components
), se eu:
return (
<MyElement
innerRef={instance => connectDragSource(connectDropTarget(findDOMNode(instance)))}
style={{ ...style, opacity }}
>
{text}
</MyElement>
);
Apenas a chamada interna funciona (neste caso, connectDropTarget
, mas se eu trocar connectDropTarget
e connectDragSource
, então apenas connectDragSource
funcionará).
Isso funciona, no entanto:
return (
<MyElement
innerRef={instance => {
const domNode = findDOMNode(instance)
connectDragSource(domNode)
connectDropTarget(domNode)
}}
style={{ ...style, opacity }}
>
{text}
</MyElement>
);
Alguma razão para quê?
Alguma notícia sobre este assunto?
Seria ótimo se o React DnD funcionasse com Styled-Components (com innerRef) e não apenas com elementos div nativos.
Eu me pergunto como isso está acontecendo, porque as funções do conector devem retornar um ReactElement clonado, e é estranho que funcione bem em um contexto de renderização. Interessado em ouvir a explicação se alguma aparecer. :-)
Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.
Comentários muito úteis
Alguma notícia sobre este assunto?