如何將裝飾語法轉換爲ES6？

我想了解some code反應寫在ESnext（裝飾）。我知道如何裝飾從ESnext轉換器ES6語法如何將裝飾語法轉換爲ES6？

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

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>, 
    )); 
    } 
}

來源

2017-08-24 Manuk Karapetyan

您發佈的內容不是ES7。 ES7（ES2016）不支持修飾器。 –

@FelixKling感謝您的澄清！ –

因爲你有兩個高階組件（HOC）裝飾你需要把它們混合起來，敷類與這兩個（DropTarget的和DragSource上）導出時。如果您使用的是redux庫，那麼您可以使用它的效用函數compose，該函數結合了多個HOC並將其封裝在類中。你需要關注的代碼是在下面的代碼的末尾：

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

來源

2017-08-24 13:53:19 lukaleli

打字稿文檔提供的decorator composition很好的解釋（TS裝飾和ES decorators proposal是在大多數情況下是相同的）：

當多個裝飾應用到單個聲明，他們的 evaluati與數學中的函數組成類似。在這個模型中，當組合函數f和g時，得到的複合體（f∘ g）（x）等價於f（g（x））。

每個裝飾的表達式進行求值頂部至底部：

這樣，在打字原稿在單個聲明評估多個裝飾時，執行以下步驟。

然後結果被稱爲從下到上的函數。

所以這應該是：

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

這應該在生產用於大專院校的目的，而不是。原始代碼不是ES6，而是JSX，它仍然需要將轉換器（Babel）轉換爲有效的JavaScript。所以沒有理由不使用Babel提供的所有功能，包括修飾器。

來源

2017-08-24 14:00:24 estus

謝謝！，解釋是我需要的！ –

如何將裝飾語法轉換爲ES6？

回答

相關問題