react-dnd getDecoratedComponentInstance()不是函数 [英] react-dnd getDecoratedComponentInstance() is not a function

问题描述

我目前正在构建一个功能，用于在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

一切工作都很好，直到有人告诉我不要在下面我的存储库中的js/componenets/File.jsx中使用findDOMNode.

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

当我尝试重新排列图像位置时会发生这种情况.即将第二张图片拖到第一位.

搜索后，我找到了一个有关如何解决此问题的示例.但是那个例子是行不通的.此示例为:反应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;

解决方案

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

通过node属性可以直接在component实例上访问node，这意味着您可以轻松执行

const hoverBoundingRect = component.node.getBoundingClientRect();

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

I am currently building a feature for file upload and sorting within react.

I have used the following examples:

• 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

Everything worked fine, until it came to eslint telling me not to use findDOMNode within js/componenets/File.jsx in my repository below.

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

It happens when I try to re-sort the position of the images. Ie drag 2nd image to 1st place.

After a search, I found an example over how to resolve this. However that example just wont work. This example was: React DnD: Avoid using findDOMNode

As with their example I tried the following:

js/components/File.jsx:35

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

Then in the same file I uncomment line 62:

const rawComponent = component.getDecoratedComponentInstance();

and replace (line 71):

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

with (line 70):

const hoverBoundingRect = rawComponent.node.getBoundingClientRect();

I then get:

getDecoratedComponentInstance() is not a function

Does anyone have any idea how I might go about resolving this issue? I apologise for the mess in my code. I am new to react and have been attempting to keep things as clean as possible.

Edit

I thought I'd resolved the problem with the below. However doing this meant that I couldn't drag the images to the other box. Switching around the let exportFile = DragSource..... with DropTarget, gave me my initial issue of the function call not being a function.

At the bottom of my File.jsx file. I had:

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

I replaced this with:

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;

解决方案

You don't actually need to create a rawComponent variable and call getDecoratedComponentInstance which doesn't exist as a method on the component anyway.

The node can simply be access on the component instance via the node property which mean you can simply do

const hoverBoundingRect = component.node.getBoundingClientRect();

Btw you also seem to have the dependencies lodash and microevent duplicated in your package.json file.

这篇关于react-dnd getDecoratedComponentInstance()不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！