javascript - 将 DropTarget 装饰器翻译成 ES6

Question

我正在浏览react-dnd. 我以前从未使用过的东西是使用 ES6 语法将道具传递给 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

那是一个装饰器，会翻译成这样：

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