React-dnd: ref를 전달하면 정렬 가능한 예제가 작동하지 않습니다.

예는 다음과 같습니다.

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

그러나 다음과 같은 연결 방법을 사용하여 전달하는 참조( styled-components 사용하기 때문에 innerRef 사용), 다음과 같이 하십시오.

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>
);

이유가 있나요?