react-dnd getDecoratedComponentInstance() n'est pas une fonction

Question

Je suis en train de créer une fonctionnalité pour le téléchargement et le tri de fichiers dans rea.

J'ai utilisé les exemples suivants:

• 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

Tout fonctionnait bien, jusqu'à ce qu'il s'eslint me disant de ne pas utiliser findDOMNode dans les js/componenets/File.jsx dans mon dépôt ci-dessous.

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

Il arrive lorsque je tente de trier à nouveau la position des images. C'est à dire glisser la 2ème image à la 1ère place.

Après une recherche, j'ai trouvé un exemple sur la façon de résoudre ce problème. Cependant, cet exemple ne marchera pas. Cet exemple a été: React DnD: Avoid using findDOMNode

Comme leur exemple j'ai essayé les éléments suivants:

js/composants/File.jsx: 35

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

Ensuite, dans le même fichier que je ligne 62 uncomment:

const rawComponent = component.getDecoratedComponentInstance();

et remplacer (ligne 71):

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

avec (ligne 70):

const hoverBoundingRect = rawComponent.node.getBoundingClientRect();

je puis obtenir:

getDecoratedComponentInstance() is not a function

Est-ce que quelqu'un a une idée comment je pourrais aller sur la résolution de ce problème ? Je m'excuse pour le désordre dans mon code. Je suis nouveau à réagir et j'ai essayé de garder les choses aussi propres que possible.

Modifier

Je croyais avoir résolu le problème avec le ci-dessous. Cependant, cela signifiait que je ne pouvais pas faire glisser les images dans l'autre boîte. Basculer autour de la let exportFile = DragSource ..... avec DropTarget, m'a donné mon premier problème de l'appel de la fonction n'étant pas une fonction.

Au bas de mon fichier File.jsx.J'ai eu:

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

Je remplacé cela avec:

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

Vous n'avez pas réellement besoin de créer une variable rawComponent et appeler getDecoratedComponentInstance qui n'existe pas comme méthode sur le composant de toute façon.

Le node peut être simplement l'accès à l'component exemple via la propriété node qui signifie que vous pouvez simplement faire

const hoverBoundingRect = component.node.getBoundingClientRect(); 

vous BTW semblent aussi avoir les dépendances lodash et microevent dupliqués dans votre fichier package.json.