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
一切正常,直到 eslint 告诉我不要在下面我的存储库中的 js/componenets/File.jsx 中使用 findDOMNode。
https://github.com/GregHolmes/react-dnd-dropzone
当我尝试重新排序图像的位置时发生。即拖第二张图片到第一名。
经过搜索,我找到了解决此问题的示例。然而,这个例子是行不通的。这个例子是:
与他们的示例一样,我尝试了以下操作:
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
可以简单地通过 node
属性 在 component
实例上访问,这意味着您可以简单地执行
const hoverBoundingRect = component.node.getBoundingClientRect();
顺便说一句,您似乎还在 package.json
文件中复制了依赖项 lodash
和 microevent
。
我目前正在构建一个用于在 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
当我尝试重新排序图像的位置时发生。即拖第二张图片到第一名。
经过搜索,我找到了解决此问题的示例。然而,这个例子是行不通的。这个例子是:
与他们的示例一样,我尝试了以下操作:
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
可以简单地通过 node
属性 在 component
实例上访问,这意味着您可以简单地执行
const hoverBoundingRect = component.node.getBoundingClientRect();
顺便说一句,您似乎还在 package.json
文件中复制了依赖项 lodash
和 microevent
。