将DropTarget装饰器转换为ES6

Question

我正在浏览react-dnd的例子。我之前从未使用的东西是使用ES6语法将props传递给HOC函数。

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

如何使用ES6语法实现此功能？当我把它作为这样的参数传递时，我得到了未定义的道具。

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

Answer 1

这是一个decorator并将转化为：

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