无法分配给“MyComponent”，因为它不是变量（ReactJS 中的react-dnd 多拖放支持答案

【问题标题】：Cannot assign to 'MyComponent' because it is not a variable (react-dnd multi drag&drop support in ReactJS无法分配给“MyComponent”，因为它不是变量（ReactJS 中的react-dnd 多拖放支持
【发布时间】：2019-04-15 15:56:55
【问题描述】：

我想同时使用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;

我发现在here 中是可能的。但是，在我的环境中，我收到此错误：

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

我正在使用 TypeScript (.ts)。这可能是问题吗？如果是这样，如何在 TypeScript 中实现相同的功能？

【问题讨论】：

标签： javascript reactjs typescript react-dnd

【解决方案1】：

不要尝试重新分配您的班级名称，只需使用新名称：

class MyComponent extends ...

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

唯一重要的是你最终export default 是你希望调用者在导入MyComponent 时使用的版本。

【讨论】：