反應-DND簡單排序的例子ES6而不是ES7

我試圖以此爲榜樣：反應-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示例，以便我可以更好地瞭解發生了什麼，並重寫該示例以供我自己使用。

來源

2015-11-04 Recur

您可能會嘗試將ES7編譯爲ES6，查看它的功能，然後將其放入您自己的代碼中。 – Bergi

你應該看看[documentation]（http://gaearon.github.io/react-dnd/docs-drag-source.html），其中包含ES5,6和7的示例。 –

你是否能夠找到/製作一個？對於React和ES6我是一個新手，我也在爲此苦苦掙扎。 – hakunin

如果你不明白任何es6 \ 7功能，你總是可以去babeljs.io並嘗試一下。關於裝飾器 - 一個函數裝飾器接受一個函數，包裝（或裝飾）它的調用並返回包裝器，這會改變默認行爲。你可以看到的例子，在這裏讀到它：

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({ 
    connectDropTarget: connect.dropTarget() 
})) 
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({ 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
}))

的解決方案來實現等效代碼：http://javascript.info/tutorial/decorators

Here is your example in babeljs

來源

2015-11-05 03:06:24 Errorpro

Babel將代碼轉換爲ES5 ..我是否正確地假設？ – Recur

是的，babel變成ES 6 \ 7 - > ES5。 – Errorpro

有沒有辦法將ES7改爲ES6呢？ – Recur

你或許會碰到的例子中的一部分，其中ES7裝飾堆疊絆倒在ES5或ES6中給出 - http://gaearon.github.io/react-dnd/docs-faq.html - 使用lodash流函數來組合函數 - 但是在示例代碼中缺少數組括號存在一個小錯誤。因此，正確的代碼應該是：

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

P.S.巴貝爾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-10 11:17:18 sebbulon

_.flow是一個很好的解決方案，但它是沒有必要只安裝下劃線並添加進口這一個任務。

DragSource()返回一個函數，該函數將React組件類作爲輸入並返回一個新的React組件類，該類將充當拖動源。 DropTarget()做同樣的事情。知道這一點，我們可以簡單的寫：

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

DropTarget(/*...*/)(YourComponent)會返回一個目標組件類，並DragSource(/*...*/)可以在新創建的組件類閱讀並吐出了最後的組件類，既下降目標和拖動源。

有點冗長，但它可以在不使用外部庫的情況下完成工作，如果這正是您想要的。

來源

2017-08-17 20:12:05

反應-DND簡單排序的例子ES6而不是ES7

回答

相關問題