将 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);