2

我正在尝试一个 react-dnd 代码示例：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组件使用不同的？

4

1 回答 1

1

drop 函数通过 props 传递，但无权访问它（请参阅http://react-dnd.github.io/react-dnd/docs-drop-target.html），因此您只需将 boxTarget 重写为看起来像：

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

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

于 2017-11-09T20:01:19.050 回答