Wie kann man die Dekoratorsyntax in ES6 konvertieren?

Question

Ich versuche zu verstehen some code React in ESnext geschrieben (Dekoratoren). Ich weiß, wie Dekorateure von ESnext zu ES6 Syntax

// ESnext 
function collect(connect, monitor) { 
    return { 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
    } 
} 

@DragSource(Types.CARD, cardSource, collect) 
export default class Card extends React.Component { 
    render() { 
    const { id } = this.props; 
    const { isDragging, connectDragSource } = this.props; 

    return connectDragSource(
     <div> 
     I am a draggable card number {id} 
     {isDragging && ' (and I am being dragged now)'} 
     </div> 
    ); 
    } 
} 

ES6

// ES6 
function collect(connect, monitor) { 
    return { 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
    }; 
} 

class Card extends React.Component { 
    render() { 
    const { id } = this.props; 
    const { isDragging, connectDragSource } = this.props; 

    return connectDragSource(
     <div> 
     I am a draggable card number {id} 
     {isDragging && ' (and I am being dragged now)'} 
     </div> 
    ); 
    } 
} 

export default DragSource(Types.CARD, cardSource, collect)(Card); 

Aber ich bin fest zu konvertieren, wie Sie diesen Code zu ES6 konvertieren?

function collectDrop(connect) { 
    return { 
    connectDropTarget: connect.dropTarget(), 
    }; 
} 

function collectDrag(connect, monitor) { 
    return { 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
    }; 
} 

@DropTarget(ItemTypes.CARD, cardTarget, collectDrop) 
@DragSource(ItemTypes.CARD, cardSource, collectDrag) 
export default class Card extends Component { 
    static propTypes = { 
    connectDragSource: PropTypes.func.isRequired, 
    connectDropTarget: PropTypes.func.isRequired, 
    index: PropTypes.number.isRequired, 
    isDragging: PropTypes.bool.isRequired, 
    id: PropTypes.any.isRequired, 
    text: PropTypes.string.isRequired, 
    moveCard: PropTypes.func.isRequired, 
    }; 

    render() { 
    const { text, isDragging, connectDragSource, connectDropTarget } = this.props; 
    const opacity = isDragging ? 0 : 1; 

    return connectDragSource(connectDropTarget(
     <div style={{ ...style, opacity }}> 
     {text} 
     </div>, 
    )); 
    } 
} 

Answer 1

Weil Sie zwei höherer Ordnung Komponente (HOC) Dekorateure haben müssen Sie sie kombinieren und Ihre Klasse wickeln, wenn sie mit diesen beiden (Droptarget und Dragsource) exportieren. Wenn Sie die Bibliothek redux verwenden, können Sie die Dienstprogrammfunktion compose verwenden, die mehrere HOCs kombiniert und die Klasse damit umschließt. Der Code, den Sie sich konzentrieren müssen, ist am Ende des Codes unter:

import { compose } from 'redux' 

function collectDrop(connect) { 
    return { 
    connectDropTarget: connect.dropTarget(), 
    }; 
} 

function collectDrag(connect, monitor) { 
    return { 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
    }; 
} 

class Card extends Component { 
    static propTypes = { 
    connectDragSource: PropTypes.func.isRequired, 
    connectDropTarget: PropTypes.func.isRequired, 
    index: PropTypes.number.isRequired, 
    isDragging: PropTypes.bool.isRequired, 
    id: PropTypes.any.isRequired, 
    text: PropTypes.string.isRequired, 
    moveCard: PropTypes.func.isRequired, 
    }; 

    render() { 
    const { text, isDragging, connectDragSource, connectDropTarget } = this.props; 
    const opacity = isDragging ? 0 : 1; 

    return connectDragSource(connectDropTarget(
     <div style={{ ...style, opacity }}> 
     {text} 
     </div>, 
    )); 
    } 
} 

const enhance = compose(
    DropTarget(ItemTypes.CARD, cardTarget, collectDrop), 
    DragSource(ItemTypes.CARD, cardSource, collectDrag) 
) 

export default enhance(Card) 

Oder (wenn Sie nicht redux verwenden) Sie sie so kombinieren können:

// Comment this part out 
/* const enhance = compose(
    DropTarget(ItemTypes.CARD, cardTarget, collectDrop), 
    DragSource(ItemTypes.CARD, cardSource, collectDrag) 
) 

export default enhance(Card)*/ 

// and change to this 

const dropTargetHOC = DropTarget(ItemTypes.CARD, cardTarget, collectDrop) 
const dragSourceHOC = DragSource(ItemTypes.CARD, cardSource, collectDrag) 

export default dropTargetHOC(dragSourceHOC(Card)) 

Answer 2

Typoskript Dokumentation liefert gute Erklärung von decorator composition (TS Dekorateure und ES decorators proposal sind identisch zum größten Teil):

Wenn mehrere Dekorateure auf eine einzige Erklärung, ihre Evaluati gelten on ähnelt der Funktionszusammensetzung in der Mathematik. In diesem Modell, wenn die Funktionen f und g zusammengesetzt werden, ist das resultierende Komposit (f g) (x) äquivalent zu f (g (x)).

Als solche werden die folgenden Schritte ausgeführt, wenn mehrere Dekorateure auf einer einzigen Erklärung in Typoskript Bewertung:

Die Ausdrücke für jeden Dekorateur ausgewertet werden von oben nach unten.

Die Ergebnisse werden dann als Funktionen von unten nach oben aufgerufen.

So soll es sein:

export default DropTarget(ItemTypes.CARD, cardTarget, collectDrop)(
    DragSource(ItemTypes.CARD, cardSource, collectDrag)(Card); 
); 

Dies soll für akademische Zwecke verwendet werden und nicht in der Produktion. Der ursprüngliche Code ist nicht ES6, sondern JSX. Er benötigt weiterhin einen Transpiler (Babel), der in gültiges JavaScript konvertiert wird. Es gibt also keinen Grund, nicht alle Funktionen zu nutzen, die Babel bietet, einschließlich Dekorateure.