私はreact-dndコード例の1つを試しています: 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