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);

P.S。即使第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 |   }

Answer 3

如果你不理解任何es6 \ 7功能，你总是可以去babeljs.io并尝试一下。关于装饰器 - 函数装饰器接受一个函数，包装（或修饰）它的调用并返回包装器，这会改变默认行为。您可以在此处查看示例并阅读相关内容：http://javascript.info/tutorial/decorators

Here is your example in babeljs

Answer 4

似乎HongJheLi用ES6中重新制作的示例进行了回购：https://github.com/HongJheLi

问题的根源

export default flow([
  DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  })),
  DropTarget(ItemTypes.CARD, cardTarget, connect => ({
    connectDropTarget: connect.dropTarget(),
  }))
])(Card);

Answer 5

方法一。

嵌套 HOC

export default DragSource()(DropTarget()(Component));

方法 2。

使用 flow 中的 lodash 方法

import _ from 'lodash';

export default _.flow([DragSource(), DropTarget()])(Component);

方法 3。

使用 redux compose

import { compose } from 'redux';

export default compose(DragSource(), DropTarget())(Component)

react-dnd简单的可排序示例ES6而不是ES7

5 个答案:

方法一。

方法 2。

方法 3。