Ad

Cannot Assign To 'MyComponent' Because It Is Not A Variable (react-dnd Multi Drag&drop Support In ReactJS

I would like to have drag and drop at the same time using react-dnd

// ... imports ...
class MyComponent extends Component {
  render () {
    const { connectDragSource, isDragging, connectDropTarget, isOver } = this.props

    return connectDragSource(connectDropTarget(
      <div style={{ opacity: isDragging ? 0.5 : 1 }} >
        Just an example
     </div>
    ))
  }
}

MyComponent = DragSource('MyComponent', elementSource, (connect, 
monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))(MyComponent);

MyComponent = DropTarget('MyComponent', elementTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))(MyComponent);

export default MyComponent;

I found that it is possible in here. However, In my environment I get this error:

Cannot assign to 'MyComponent' because it is not a variable [.ts(2539)]

I am using TypeScript (.ts). Could this be the problem? If so, How can achieve same thing in TypeScript?

Ad

Answer

instead of trying to reassign your class name, just use new names:

class MyComponent extends ...

const MyComponent2 = DragSource(...)(MyComponent);
const MyComponent3 = DropTarget(...)(MyComponent2);
export default MyComponent3;

The only thing that matters is that you eventually export default the version you want callers to use when they import MyComponent.

Ad
source: stackoverflow.com
Ad