がDNDリアクト - 私は反応し-DNDコード例のいずれかをしようとしている各compoents

Question

のために使用する異なる名前の小道具を：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を使用する必要があるので、私はこの1つ

<Dustbin name="dustbin1" /> 
<Dustbin name="dustbin2" /> 

などの小道具を渡され、それがクラス内ではありませんので、しかしthis.propsは多分、undefinedなった

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

に boxTargetを変更しました。回避策はありますか？コンポーネントごとに異なる nameを使用できますか？

Answer 1

ドロップ機能は、小道具を通過したが、この（http://react-dnd.github.io/react-dnd/docs-drop-target.htmlを参照）へのアクセスを持っていない、あなただけのように見えるためにboxTargetを書き換える必要があるので、取得します：

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

そして、返すことができるようになりますあなたがそれを小道具として渡した名前