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 是一个很好的解决方案,但没有必要安装下划线并为这一项任务添加导入.

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

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

DropTarget(/*...*/)(YourComponent)将返回一个目标组件类,并DragSource(/*...*/)可以读入新创建的组件类并吐出一个最终组件类,它同时是一个放置目标和一个拖动源.

有点冗长,但它可以在不使用外部库的情况下完成工作,如果这就是您正在寻找的东西.

Answer 2

您可能偶然发现了ES7装饰器堆叠的示例中的部分:

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  connectDropTarget: connect.dropTarget()
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))

这里给出了在ES5或ES6中实现等效代码的解决方案 - http://gaearon.github.io/react-dnd/docs-faq.html - 使用lodash flow函数来组合函数 - 但是有一点点错误的示例代码中缺少数组括号.因此,正确的代码应该是:

export default flow([
  DragSource(/* ... */),
  DropTarget(/* ... */)]
)(YourComponent);

PS即使第1阶段激活,Babel REPL似乎也不支持装饰器,我收到以下错误:

repl: Decorators are not supported yet in 6.x pending proposal update.
  3 |   connectDropTarget: connect.dropTarget()
  4 | }))
> 5 | export default class Card extends Component {
    |                ^
  6 |   render() { 
  7 |     return <div>asdas</div>
  8 |   }