I am trying to apply a basic example of react DnD to my project (as a proof of concept) and am running into some issues. I am using this example - https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive . which just let you drag around some divs inside a box.
So I have an outer component (Note: this is a few component levels up from the actual drag component) which is basically the whole page (this is just for testing a POC at first) which looks like so:
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 pretty close to the examples container, just using a string for now instead of that constant in @DropTarget . The getBuilders just renders other components inside. I Ran this component before creating the DragSource component and everything was running fine.
So, a few components down I just added the react DnD syntax to the component I want to be draggable like so :
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>
);
}
}
So with all this, I am getting this error on the console (the app is stopping rendering too).
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).(…)
What is strange is the dragsource isn't even called onto the dom yet, so I have no idea where to start with this error. Any input or suggestions would be greatly appreciated. Thanks!
