javascript - 无法理解react组件中带有@符号的函数

Question

我刚刚查看了 React Darg 并将示例放在 HERE 上，所以当我检查源代码时，我看到以下代码行:

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

我不太明白这几行代码在做什么或者到底意味着什么，整个组件代码可以找到 HERE (大约有 54 行 JS。)。有人可以举例说明这些代码行在做什么吗？

Answer 1

@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 的函数将您的组件包装在处理放置事件的自定义组件中。