React-dnd: المثال القابل للفرز لا يعمل عن طريق تمرير المرجع

المثال هو:

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

لكن باستخدام الطرق البديلة للاتصال ، مثل مرجع عابر (باستخدام 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>
);

اي سبب لماذا؟