React DND - 为每个组件使用不同的名称道具
React DND - Use different name prop for each compoents
我正在尝试 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
?
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 代码示例之一: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
?
drop 函数获得了 props,但无法访问它(参见 http://react-dnd.github.io/react-dnd/docs-drop-target.html),因此您只需重写 boxTarget 使其看起来像:
const boxTarget = {
drop(props) {
return { name: props.name }
}
}
并且它将能够return你传递给它的名字作为道具