Question

https://github.com/react-dnd/react-dnd/blob/master/examples/04%20Sortable/Simple/Card.js

我试图找出这个例子中@符号的含义。

它应该是一个简单的拖放示例，但是我假设ES7的例子让我失望了，我无法理解这样做......或者如何把它翻译成ES6

如果有人可以在ES6中重写这部分，那么我就能理解它，那就太棒了。

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
}))
export default class Card extends Component {
  static propTypes = {
    connectDragSource: PropTypes.func.isRequired,
    connectDropTarget: PropTypes.func.isRequired,
    index: PropTypes.number.isRequired,
    isDragging: PropTypes.bool.isRequired,
    id: PropTypes.any.isRequired,
    text: PropTypes.string.isRequired,
    moveCard: PropTypes.func.isRequired,
  };

Answer 1

@符号通常被称为装饰器（类似于Java中的注释）。它用于告诉解析器您正在使用装饰器。

装饰器用于向现有功能添加其他功能，而无需对其进行修改。上面的decorates采用了一个额外的参数，即被装饰的函数，并返回具有附加功能的相同函数。

使用DropTarget包裹您的组件，使其对正在拖动，悬停或掉落的兼容项目做出反应。 DropTarget是一个高阶组件。

DropTarget Documentation

使用DragSource包装组件以使其可拖动。 DragSource是一个接受三个必需参数的高阶组件。它们将在下面详细描述。

DragSource Documentation

在每个文档页面上，您可以找到ES7，ES6和ES5中的示例。

我希望这有助于:)。

在此上下文中找出@符号

1 个答案: