Reactjs react dnd getDecoratedComponentInstance（）不是函数

我目前正在react中构建一个文件上传和排序功能

我使用了以下例子：

一切正常，直到eslint告诉我不要在下面我的存储库中的js/componenets/File.jsx中使用findDOMNode

当我尝试重新排序图像的位置时，就会发生这种情况。Ie将第二张图片拖到第一位

在搜索之后，我找到了一个关于如何解决这个问题的示例。然而，这个例子是行不通的。这个例子是：

与他们的例子一样，我尝试了以下方法：

js/components/File.jsx:35

this.node=node}style={{……style，opacity}}>

然后在同一文件中，我取消注释第62行：

const rawComponent=component.getDecoratedComponentInstance（）

并替换（第71行）：

const hoverBoundingRect=findDOMNode（component.getBoundingClientRect（）

（第70行）：

const hoverBoundingRect=rawComponent.node.getBoundingClientRect（）

然后我得到：

getDecoratedComponentInstance（）不是函数

有人知道我该如何解决这个问题吗？我为我代码中的混乱道歉。我是一个新的反应者，我一直在努力保持事物尽可能干净

编辑

我想我已经解决了下面的问题。但是，这样做意味着我无法将图像拖到另一个框中。切换let exportFile=DragSource。。。。。对于DropTarget，我给出了函数调用不是函数的初始问题

在my File.jsx文件的底部。我有：

export default flow(
DropTarget("FILE", fileTarget, connect => ({
    connectDropTarget: connect.dropTarget()
})),
DragSource("FILE", fileSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
}))
)(File);

我将其替换为：

function collectDragSource(connect, monitor) {
    return {
        connectDragSource: connect.dragSource(),
        isDragging: monitor.isDragging()
    };
}

function collectDropTarget(connect) {
    return {
        connectDropTarget: connect.dropTarget()
    };
}

let exportFile = DragSource('file', fileSource, collectDragSource)(File);
exportFile = DropTarget('file', fileTarget, collectDropTarget)(exportFile);

export default exportFile;

实际上，您不需要创建
rawComponent
变量并调用
getDecoratedComponentInstance
，该变量无论如何都不作为组件上的方法存在

可以通过
节点
属性在
组件
实例上访问
节点
，这意味着您只需

const hoverBoundingRect = component.node.getBoundingClientRect();

顺便说一句，您的
package.json
文件中似乎还有重复的依赖项
lodash
和
microevent
。
这对
react不起作用-dnd@2.3.0
和
react@15.3.1
。看见