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

Question

我正在尝试 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，可能是因为它不在 class 内。是否有任何解决方法，以便我可以为每个 Dustbin 组件使用不同的 name？

Answer 1

drop 函数获得了 props，但无法访问它（参见 http://react-dnd.github.io/react-dnd/docs-drop-target.html），因此您只需重写 boxTarget 使其看起来像：

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

并且它将能够return你传递给它的名字作为道具

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

React DND - Use different name prop for each compoents

reactjs

react-dnd