React-dnd: O exemplo classificável não funciona passando ref

Criado em 17 jul. 2017  ·  4Comentários  ·  Fonte: react-dnd/react-dnd

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ê?

wontfix

Comentários muito úteis

Alguma notícia sobre este assunto?

Todos 4 comentários

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.

Esta página foi útil?
0 / 5 - 0 avaliações