Translating DropTarget decorator to ES6

Question

I am going through examples of react-dnd. Something I've never used before is passing props into HOC functions using ES6 syntax.

@DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}))
export default class TargetBox extends Component {
  ...
}

How do I implement this using ES6 syntax? I get undefined props when I just pass it as an argument like this.

export default DropTarget(props.accepts, boxTarget, collect)(TargetBox);

Andrew Li · Accepted Answer · 2017-12-18T15:04:28.153

1

That's a decorator and would translate to this:

export default DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
}))(TargetBox);

edited Dec 18 '17 at 15:04

answered Dec 16 '17 at 17:36

Andrew Li

55,805
14
125
143

If it's a proposal then it's not part of ES7 (ES2016). – Felix Kling Dec 18 '17 at 14:23
@FelixKling Hmm, yeah. Wasn't it supposed to be in ES7 but scrapped? I'm used to calling it ES7 but it was removed from staging. – Andrew Li Dec 18 '17 at 15:04

Translating DropTarget decorator to ES6

1 Answers1