2

私は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異なる方法を使用できるようにするための回避策はありますか?nameDustbin

4

1 に答える 1