Question

我刚刚查看了React Darg并在HERE上删除了示例，所以当我检查源代码时，我看到以下几行代码：

@DropTarget(ItemTypes.BOX, boxTarget, (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop(),
}))

我不太明白这些代码行正在做什么或者究竟是什么意思，整个组件代码可以找到HERE（大约54行JS。）。有人可以举例说明这些代码行正在做什么吗？

Answer 1

那些是JavaScript Decorators。

They are目前为a stage-2 (Draft) proposal（在4-stage process中）。这意味着它们还不是JavaScript的一部分，但可能会成为未来。

无论如何，某些转发器（例如Babel和TypeScript）已经支持它们，因此如果您愿意，可以立即使用它们。

这就是您链接的lib所发生的事情（他们在代码中使用了装饰器，但之前已将其转换为可以在当前版本的JavaScript中执行）。

Answer 2

@DropTarget是decorator function。

如果您查看tutorial's section on dropTarget，您会看到一个按钮，您可以在ES7，ES6和ES5示例代码之间切换。

作为使用装饰器的替代方法，您只需使用它的三个参数调用装饰器方法，这将返回一个可以将组件传递给的函数。这是ES6的等价物：

class Dustbin extends Component {
  ...
}

DropTarget(ItemTypes.BOX, boxTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  canDrop: monitor.canDrop(),
}))(Dustbin)

您可以查看source code of the DropTarget装饰器，看看它是如何工作的。

它根据传递给它的参数进行一些预处理，然后返回一个函数，该函数使用decorateHandler将组件包装在处理drop事件的自定义组件中。

能够在反应组件中理解@符号的功能

2 个答案: