React-dnd: 通过传递 ref 无法排序示例

例子是：

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

有什么理由吗？