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

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

Here is your example in babeljs

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 流功能组合功能 - 但是示例代码中缺少数组的地方有点错误括号。因此正确的代码应该是：

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

P.S。即使激活了 Stage 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

_.flow 是一个很好的解决方案，但没有必要只为这个任务安装下划线和添加导入。

DragSource() return 是一个函数，它接受一个 React 组件 class 作为输入，return 是一个新的 React 组件 class，它将作为一个拖拽资源。 DropTarget() 做同样的事情。知道这一点，我们可以简单地写：

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

DropTarget(/*...*/)(YourComponent) 将 return 一个目标组件 class，并且 DragSource(/*...*/) 可以读入新创建的组件 class 并吐出最终组件 class 既是放置目标又是拖动源。

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

Answer 4

看起来像HongJheLi made a repo with the example remade in 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));

方法二

使用 lodash

中的 flow 方法

import _ from 'lodash';

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

方法三

使用 redux compose

import { compose } from 'redux';

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

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

react-dnd simple sortable example ES6 instead of ES7

decorator

ecmascript-6

reactjs

ecmascript-2016

方法一

方法二

方法三