我目前正在为 react 中的文件上传和排序构建一个功能。
我使用了以下示例：
- https://gaearon.github.io/react-dnd/examples-chessboard-tutorial-app.html
- https://github.com/okonet/react-dropzone
- https://github.com/gaearon/react-dnd-html5-backend
一切正常，直到 eslint 告诉我不要在下面的存储库中的 js/componenets/File.jsx 中使用 findDOMNode。
https://github.com/GregHolmes/react-dnd-dropzone
当我尝试重新排序图像的位置时会发生这种情况。即将第二张图片拖到第一名。
经过搜索，我找到了一个有关如何解决此问题的示例。然而，这个例子是行不通的。这个例子是：React DnD：避免使用 findDOMNode
与他们的示例一样，我尝试了以下操作：
js/components/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
有谁知道我该如何解决这个问题？我为我的代码中的混乱道歉。我是新来的反应，并一直试图保持尽可能干净。
编辑
我以为我已经解决了以下问题。但是这样做意味着我无法将图像拖到另一个框。使用 DropTarget 切换 let exportFile = DragSource..... 给了我最初的函数调用不是函数的问题。
在我的 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;