react-dnd 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.htmlhttps://github.com/okonet/react-dropzonehttps://github.com/gaearon/react-dnd-html5-backendEverything 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-dropzoneIt 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 findDOMNodeAs 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 functionDoes 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.EditI 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 doconst hoverBoundingRect = component.node.getBoundingClientRect();Btw you also seem to have the dependencies lodash and microevent duplicated in your package.json file. 这篇关于react-dnd getDecoratedComponentInstance()不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！