デコレータの構文をES6に変換するには？

Question

私は理解しようとしていますsome code答えはESnext（デコレータ）で書かれています。 は私が

// 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); 

ES6構文にESnextからデコレータを変換する方法を知っているしかし、私はES6にこのコードを変換する方法こだわっていますか？

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

あなたがそれらを結合し、これら2つ（のDropTargetとのDragSource）でエクスポートするときに、あなたのクラスをラップする必要がある2つの高次成分（HOC）デコレータを持っているので。ライブラリreduxを使用している場合は、ユーティリティ機能composeを使用して複数のHOCを結合し、そのクラスをラップすることができます。あなたが集中する必要があるコードは、以下のコードの末尾にある：（あなたはReduxのを使用していない場合）

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) 

それとも、そのようにそれらを組み合わせることができます。

// 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

活字体のドキュメントは提供decorator compositionの良い説明（TSデコレータとES decorators proposalは、大部分は同じです）：

複数のデコレータは、1つの宣言に適用され、その evaluati onは数学の関数の構成に似ています。この モデルでは、関数fとgを合成するとき、得られる複合体（f g）（x）はf（g（x））に相当する。このよう

活字体で単一の宣言に複数 デコレータを評価する場合、以下のステップが実行される：

各デコレータのための式は上から下に評価されます。

結果は、下から上への関数として呼び出されます。

は、だから、可能になっている：

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

。これは生産に学問の目的のために使用していないことになっています。元のコードはES6ではなくJSXですが、それでも有効なJavaScriptに変換されるためにはトランスバータ（Babel）が必要です。したがって、デコレータを含め、Babelが提供できるすべての機能を使用しない理由はありません。