react-dnd简单可排序的示例ES6代替ES7

复发

我正在尝试遵循以下示例:

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示例,这样我可以更好地了解发生了什么并重写该示例供我自己使用。

洋红色新星

_.flow 是一个不错的解决方案,但是不必为此安装下划线并添加导入。

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

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

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

有点冗长,但是如果您正在寻找的话,它无需使用外部库即可完成工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React构造器ES6与ES7

来自分类Dev

简单的Webpack + React + ES6 + babel示例不起作用。意外的令牌错误

来自分类Dev

如何为 ES6 类创建“字段”(React 示例)

来自分类Dev

简单的 Webpack 4 + Babel 7 + ES6 语法中的 React ClickHandler

来自分类Dev

es6 / 7 React14中的StaticProptypes

来自分类Dev

无法使用Webpack和React编译ES7功能

来自分类Dev

ES6 React和ESLint支持

来自分类Dev

清除状态es6 React

来自分类Dev

React Native中的ES6功能

来自分类Dev

ES6(traceur)+ Webpack + React

来自分类Dev

在React es6中反跳

来自分类Dev

React - ES6 - 意外令牌

来自分类Dev

React ES6 函数声明范围

来自分类Dev

React/ES6 减少对象

来自分类Dev

如何使用KARMA对React JSX ES6代码进行单元测试?

来自分类Dev

SonarQube能够分析react / jsx / es6代码吗?

来自分类Dev

React + Webpack + babel7 解析 es6 风格的函数赋值失败

来自分类Dev

未处于远程调试模式时,React Native中未定义ES6代理吗?

来自分类Dev

使用ES6 / ES7的Angular 1.4

来自分类Dev

使用 ES6 或 ES7 减少块条件

来自分类Dev

将ES7静态propTypes与React-Native一起使用

来自分类Dev

ES7是ECMAScript2016的别称吗?如何在React中编写它?

来自分类Dev

React + Webpack + ES6中的动态组件名称

来自分类Dev

ES6 / React Second项目绑定失败

来自分类Dev

如何使Mixins在React ES6中工作?

来自分类Dev

将React组件从函数重构为ES6类

来自分类Dev

从地图返回的React对象传播(ES6)

来自分类Dev

如何在React Native中使用ES6

来自分类Dev

我怎么知道我在React中使用ES6?