Question

我尝试了一个反应和代码示例：https://github.com/react-dnd/react-dnd/blob/master/examples/01%20Dustbin/Single%20Target/Dustbin.js

const boxTarget = {
  drop() {
    return { name: 'Dustbin' }
  }
}

@DropTarget(ItemTypes.BOX, boxTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}))

export default class Dustbin extends Component {
  ...
}

在示例中，name是硬编码的。我需要使用动态name，所以我通过了像这样的道具

<Dustbin name="dustbin1" />
<Dustbin name="dustbin2" />

并将boxTarget更改为

const boxTarget = {
  drop() {
    return { name: this.props.name }
  }
}

但this.props成为undefined，可能是因为它不在课堂内。是否有任何解决方法，因此我可以为每个name组件使用不同的Dustbin？

Answer 1

drop函数传递了props，但是没有访问权限（参见http://react-dnd.github.io/react-dnd/docs-drop-target.html），所以你只需要重写boxTarget看起来像：

const boxTarget = {
  drop(props) {
    return { name: props.name }
  }
}

它将能够返回您作为道具传递给它的名称

React DND - 为每个组件使用不同的名称道具

1 个答案: