将 DropTarget 装饰器翻译成 ES6
Translating DropTarget decorator to ES6
我正在查看 react-dnd
的示例。我以前从未使用过的东西是使用 ES6 语法将 props 传递给 HOC 函数。
@DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}))
export default class TargetBox extends Component {
...
}
如何使用 ES6 语法实现它?当我像这样将它作为参数传递时,我得到了未定义的道具。
export default DropTarget(props.accepts, boxTarget, collect)(TargetBox);
那是 decorator 并且会翻译成这样:
export default DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}))(TargetBox);
我正在查看 react-dnd
的示例。我以前从未使用过的东西是使用 ES6 语法将 props 传递给 HOC 函数。
@DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}))
export default class TargetBox extends Component {
...
}
如何使用 ES6 语法实现它?当我像这样将它作为参数传递时,我得到了未定义的道具。
export default DropTarget(props.accepts, boxTarget, collect)(TargetBox);
那是 decorator 并且会翻译成这样:
export default DropTarget(props => props.accepts, boxTarget, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
}))(TargetBox);