11

我正在尝试遵循此示例：

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

4

5 回答 5

6

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

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

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

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

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

于 2017-08-17T20:12:05.020 回答
5

您可能偶然发现了堆叠 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);

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 |   }
于 2016-06-10T11:17:18.067 回答
0

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

这是您在 babeljs 中的示例

于 2015-11-05T03:06:24.463 回答
0

看起来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);
于 2018-09-28T17:59:50.010 回答
0

方法一。

嵌套 HOC

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

方法2。

使用flow方法来自lodash

import _ from 'lodash';

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

方法3。

使用 reduxcompose

import { compose } from 'redux';

export default compose(DragSource(), DropTarget())(Component)
于 2021-04-22T04:47:05.020 回答