Question

我目前正在构建一个用于文件上传和排序的功能。

我使用了以下示例：

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

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

with（第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可以通过component属性访问node实例，这意味着您只需执行

const hoverBoundingRect = component.node.getBoundingClientRect();

顺便说一句，您似乎还在lodash文件中复制了依赖项microevent和package.json。

react-dnd getDecoratedComponentInstance（）不是函数

1 个答案: