react-dnd getDecoratedComponentInstance（）不是函数

Question

我目前正在为反应中的文件上传和排序构建一个功能。

我已经使用了下面的例子：

• 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中使用findDOMNode /组件/ File.jsx在我的仓库下面。

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

当我试图重新排序的图像的位置它发生。即将第二张图像拖到第一位。

搜索后，我找到了一个关于如何解决这个问题的例子。然而，这个例子不会工作。这个例子是：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

没有人有任何想法，我怎么可能去解决这个问题？我为我的代码中的混乱道歉。我是新来的反应，并一直试图保持尽可能干净的东西。

编辑

我以为我已经解决了与下面的问题。但是这样做意味着我无法将图像拖到另一个框中。使用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; 

Answer 1

你实际上并不需要创建一个rawComponent变量，并调用getDecoratedComponentInstance不作为组件上的方法，反正存在。

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

const hoverBoundingRect = component.node.getBoundingClientRect(); 

顺便说一句，你似乎也有lodash和microevent复制在package.json文件的依赖关系。