我想同时使用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;
我发现在这里是可能的。但是,在我的环境中,我收到此错误:
Cannot assign to 'MyComponent' because it is not a variable [.ts(2539)]
我正在使用TypeScript (.ts(。这可能是问题所在吗?如果是这样,如何在 TypeScript 中实现同样的事情?
无需尝试重新分配类名,只需使用新名称:
class MyComponent extends ...
const MyComponent2 = DragSource(...)(MyComponent);
const MyComponent3 = DropTarget(...)(MyComponent2);
export default MyComponent3;
唯一重要的是,您最终export default
您希望调用者在导入MyComponent
时使用的版本。