reagieren-dnd einfach sortierbar Beispiel ES6 statt ES7

Question

Ich versuche, diesem Beispiel zu folgen:

https://github.com/gaearon/react-dnd/tree/master/examples/04%20Sortable/Simple

Aber der Code ES7 verwendet, und ich weiß nicht, wie die Dekorateure zu ersetzen und die dekorieren Abhängigkeit in dieser Datei:

https://github.com/gaearon/react-dnd/blob/master/examples/04%20Sortable/Simple/Card.js

ich habe über Dekorateure zu lesen versucht, aber ich es einfach nicht verstehen. Ich hoffe, dass jemand ein ES6-Beispiel des Card.js-Codes geben kann, damit ich eine bessere Vorstellung davon bekommen kann, was vor sich geht, und dieses Beispiel für meinen eigenen Gebrauch umschreiben kann.

Answer 1

Wenn Sie keine es6 \ 7 Funktionen verstehen, können Sie immer zu babeljs.io gehen und es ausprobieren. In Bezug auf Dekoratoren - Ein Funktion Dekorator akzeptiert eine Funktion, umschließt (oder dekoriert) seinen Aufruf und gibt den Wrapper zurück, der das Standardverhalten ändert. Sie können Beispiele sehen und darüber hier lesen: http://javascript.info/tutorial/decorators

Here is your example in babeljs

Answer 2

Sie wahrscheinlich über das Teil in dem Beispiel gestolpert, wo die ES7 Dekorateure gestapelt:

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

Die Lösung zu implementieren, um den entsprechenden Code in ES5 oder ES6 ist hier gegeben - http://gaearon.github.io/react-dnd/docs-faq.html - mit der Lodash-Flow-Funktion, um die Funktionen zu kombinieren - jedoch gibt es einen kleinen Fehler in der Beispielcode, wo Array-Klammern fehlt. Der korrekte Code sollte daher sein:

P.S. die Babel REPL scheint nicht Dekorateure auch mit Stufe 1 aktiviert zu unterstützen, erhalte ich folgende Fehlermeldung:

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 ist eine schöne Lösung, aber es ist nicht notwendig, Strich zu installieren und einen Import nur für diesen einen hinzufügen Aufgabe.

DragSource() gibt eine Funktion zurück, die eine React-Komponentenklasse als Eingabe verwendet und eine neue React-Komponentenklasse zurückgibt, die als Ziehquelle fungiert. DropTarget() macht das Gleiche. Mit diesem Wissen können wir einfach schreiben:

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

DropTarget(/*...*/)(YourComponent) eine Zielkomponentenklasse zurück und DragSource(/*...*/) kann in dieser neu geschaffenen Komponentenklasse und ausspucken eine endgültige Komponentenklasse, die sowohl ein Drop-Ziel ist und eine Drag-Quelle lesen .

ein wenig wortreich, aber es wird die Arbeit erledigt, ohne eine externe Bibliothek zu verwenden, wenn das ist, was Sie suchen.