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

【问题标题】：react-dnd simple sortable example ES6 instead of ES7react-dnd 简单的可排序示例 ES6 而不是 ES7
【发布时间】：2016-02-05 13:22:21
【问题描述】：

我正在尝试遵循这个例子：

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 示例，以便我可以更好地了解正在发生的事情并重写该示例以供自己使用。

【问题讨论】：

您可以尝试将 ES7 编译为 ES6，看看它做了什么，然后将其放入您自己的代码中。
你应该看看documentation，其中包含ES5、6和7中的示例
你找到/制作了一个吗？我对 React 和 ES6 非常陌生，我也在努力解决它。

标签： reactjs decorator ecmascript-6 ecmascript-2016

【解决方案1】：

_.flow 是一个不错的解决方案，但没有必要安装下划线并仅为这一任务添加导入。

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

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

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

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

【讨论】：

【解决方案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);

附：即使激活了第 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 |   }

【讨论】：

【解决方案3】：

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

Here is your example in babeljs

【讨论】：

Babel 将代码转换为 ES5.. 我的假设是否正确？
是的，babel 变成了 ES 6\7 -> ES5。
有没有办法将 ES7 改为 ES6？
我不知道。但我认为转译的装饰器在 es 6 和 es 7 中看起来很相似。所以装饰器是接收参数ItemTypes.CARD, cardTarget, connect => ({ connectDropTarget: connect.dropTarget() }) 并返回接收类的函数的函数。它应该看起来像这样：babeljs.io/repl/…

【解决方案4】：

看起来 HongJheLi 使用 ES6 中重新制作的示例创建了一个 repo：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);

【讨论】：

【解决方案5】：

方法一。

嵌套 HOC

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

方法二。

使用lodash中的flow方法

import _ from 'lodash';

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

方法3。

使用reduxcompose

import { compose } from 'redux';

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

【讨论】：