React-dnd: Пример с сортировкой не работает при передаче ref

Созданный на 17 июл. 2017  ·  4Комментарии  ·  Источник: react-dnd/react-dnd

Пример такой:

return connectDragSource(connectDropTarget(
      <div style={{ ...style, opacity }}>
        {text}
      </div>
    ));

Но с использованием альтернативных способов подключения, таких как передача ref (с использованием innerRef, потому что я использую styled-components ), если я это сделаю:

return (
      <MyElement 
        innerRef={instance => connectDragSource(connectDropTarget(findDOMNode(instance)))}
        style={{ ...style, opacity }}
      >
        {text}
      </MyElement>
);

Работает только внутренний вызов (в данном случае connectDropTarget , но если я поменяю местами connectDropTarget и connectDragSource , тогда будет работать только connectDragSource ).

Однако это работает:

return (
      <MyElement 
        innerRef={instance => {
          const domNode = findDOMNode(instance)
          connectDragSource(domNode)
          connectDropTarget(domNode)
        }}
        style={{ ...style, opacity }}
      >
        {text}
      </MyElement>
);

По какой причине?

Самый полезный комментарий

Есть новости по этому поводу?

Все 4 Комментарий

Есть новости по этому поводу?

Было бы здорово, если бы React DnD работал со стилизованными компонентами (с innerRef), а не только с собственными элементами div.

Интересно, как это происходит, потому что функции коннектора должны возвращать клонированный ReactElement, и странно, что он отлично работает в контексте рендеринга. Интересно услышать объяснение, если оно появится. :-)

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги