reactjs - React-dnd 简单可排序示例 ES6 而不是 ES7

Question

我正在尝试遵循这个示例:

https://github.com/gaearon/react-dnd/tree/master/examples/04%20Sortable/Simple

但是代码使用的是 ES7，我不知道如何替换此文件中的装饰器和装饰依赖项:

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

我尝试阅读有关装饰器的内容，但我就是不明白。我希望有人可以提供 Card.js 代码的 ES6 示例，以便我可以更好地了解正在发生的情况并重写该示例供我自己使用。

Answer 1

_.flow 是一个很好的解决方案，但没有必要仅为此一项任务安装 underscore 并添加导入。

DragSource() 返回一个函数，该函数将 React 组件类作为输入，并返回一个新的 React 组件类，该组件将充当拖动源。 DropTarget() 做同样的事情。知道了这一点，我们可以简单地写:

DragSource(_itemType_, _sourceSpecification_, _sourceCollector_)(
    DropTarget(_itemType_, _targetSpecification, _targetCollector_)(YourComponent))

DropTarget(/*...*/)(YourComponent) 会返回一个目标组件类，DragSource(/*...*/) 可以读取在新创建的组件类中，并吐出最终的组件类，它既是放置目标又是拖动源。

有点冗长，但如果您正在寻找的话，它无需使用外部库即可完成工作。