React/Redux/ReactDnd - Fehler: removeComponentAsRefFrom

Question

Ich versuche, ein grundlegendes Beispiel für reagieren DnD auf mein Projekt (als Beweis des Konzepts) und bin auf einige Probleme stoßen. Ich verwende dieses Beispiel - https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive. mit dem du ein paar divs in einer Box ziehen kannst. So

Ich habe eine äußere Komponente (Hinweis: Dies ist ein paar Komponentenebene bis von der tatsächlichen Widerstandskomponente), die im Grunde die ganze Seite ist (dies ist nur für eine POC auf den ersten Prüfung), die wie so aussieht:

import { DropTarget, DragDropContext } from 'react-dnd'; 
import HTML5Backend from 'react-dnd-html5-backend'; 

const boxTarget = { 
    drop(props, monitor, component) { 
     const item = monitor.getItem(); 
     const delta = monitor.getDifferenceFromInitialOffset(); 
     const left = Math.round(item.left + delta.x); 
     const top = Math.round(item.top + delta.y); 

     component.moveBox(item.id, left, top); 
    } 
}; 

// eslint-disable-next-line new-cap 
@DragDropContext(HTML5Backend) 
// eslint-disable-next-line new-cap 
@DropTarget('CLA_DRAG', boxTarget, (connect) => ({ 
    connectDropTarget: connect.dropTarget() 
})) 
export default class GenericPlatformComponent extends React.Component { 
    ... 

    render() { 
     const { connectDropTarget } = this.props; 

     return connectDropTarget(
      <div> 
       {this.getBuilders()} 
      </div> 
     ); 
    } 
} 

So ziemlich nah an den Beispielen Container, nur mit einer Zeichenfolge für jetzt anstelle dieser Konstante in @DropTarget. Die getBuilders rendert nur andere Komponenten nach innen. Ich lief diese Komponente vor dem Erstellen der DragSource-Komponente und alles lief gut.

Also, ein paar Komponenten nach unten habe ich nur noch die DnD-Syntax auf die Komponente reagiere ich wie so ziehbar sein wollen:

import { DragSource } from 'react-dnd'; 

const boxSource = { 
    beginDrag(props) { 
     const { id, left, top } = props; 

     return { id, left, top }; 
    } 
}; 

// eslint-disable-next-line new-cap 
@DragSource('CLA_DRAG', boxSource, (connect, monitor) => ({ 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
})) 
export default class SearchResult extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     const { connectDragSource } = this.props; 

     return connectDragSource(
      <div key={this.props.key}> 
        <Row> 
         <Col xs={2} sm={2} md={1} lg={1} > 
          <div style={tempThumbnail}> 
           Picture Here 
          </div> 
         </Col> 
         <Col xs={10} sm={10} md={11} lg={11} > 
          <DescriptionBlock result={this.props.result} {...this.props} /> 
         </Col> 
        </Row> 
      </div> 
     ); 
    } 
} 

Also mit all dem, erhalte ich diesen Fehler auf der Konsole (die app hört auch auf zu rendern).

bundle.js:29605 Uncaught (in promise) Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: react-refs-must-have-owner).(…) 

Was seltsam ist, ist der dragsource nicht einmal auf den dom noch genannt wird, so hat ich keine Ahnung, wo mit diesem Fehler zu starten. Irgendwelche Eingaben oder Vorschläge würden sehr geschätzt werden. Vielen Dank!

Answer 1

Vielleicht ausgelassen Sie es, aber Sie sollten in Ihre beiden Beispiele React werden importieren:

import React from 'react'