React-dnd getDecolatedComponentInstance() 不是一个函数

我目前正在 React 中构建文件上传和排序功能。

我使用了以下示例：

• https://gaearon.github.io/react-dnd/examples-chessboard-tutorial-app.html https://gaearon.github.io/react-dnd/examples-chessboard-tutorial-app.html
• https://github.com/okonet/react-dropzone https://github.com/okonet/react-dropzone
• https://github.com/gaearon/react-dnd-html5-backend https://github.com/gaearon/react-dnd-html5-backend

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

https://github.com/GregHolmes/react-dnd-dropzone https://github.com/GregHolmes/react-dnd-dropzone

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

经过搜索，我找到了一个有关如何解决此问题的示例。然而这个例子是行不通的。这个例子是：React DnD：避免使用 findDOMNode https://stackoverflow.com/questions/40499267/react-dnd-avoid-using-finddomnode#

与他们的示例一样，我尝试了以下操作：

js/组件/File.jsx:35

<div ref={node => this.node = node} style={{ ...style, opacity }}>

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

const rawComponent = component.getDecoratedComponentInstance();

并替换（第 71 行）：

const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

与（第 70 行）：

const hoverBoundingRect = rawComponent.node.getBoundingClientRect();

然后我得到：

getDecoratedComponentInstance() is not a function

有谁知道我该如何解决这个问题？对于我的代码中的混乱，我深表歉意。我是个新手，一直在努力保持事情尽可能干净。

Edit

我以为我已经通过下面的内容解决了问题。然而，这样做意味着我无法将图像拖到另一个框中。切换 let exportFile = DragSource..... 与 DropTarget，给了我函数调用不是函数的最初问题。

在我的 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无论如何，它不作为组件上的方法存在。

The node可以简单地访问component实例通过node财产这意味着你可以简单地做

const hoverBoundingRect = component.node.getBoundingClientRect();

顺便说一句，你似乎也有依赖性lodash and microevent重复在你的package.json file.