meteor-react -Missing類屬性轉換

Question

我正在嘗試在我的流星中用react項目實現react-dnd。

我收到錯誤是這樣的： 防止錯誤啓動：

在處理與ECMAScript的文件（目標web.browser）： 客戶機/ Card.js：37：2：/client/Card.js ：缺少類屬性轉換。

card.js file: 
    import React, { Component, PropTypes } from 'react'; 
import ItemTypes from './ItemTypes'; 
import { DragSource, DropTarget } from 'react-dnd'; 

const style = { 
    border: '1px dashed gray', 
    padding: '0.5rem 1rem', 
    marginBottom: '.5rem', 
    backgroundColor: 'white', 
    cursor: 'move' 
}; 

const cardSource = { 
    beginDrag(props) { 
    return { id: props.id }; 
    } 
}; 

const cardTarget = { 
    hover(props, monitor) { 
    const draggedId = monitor.getItem().id; 

    if (draggedId !== props.id) { 
     props.moveCard(draggedId, props.id); 
    } 
    } 
}; 

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({ 
    connectDropTarget: connect.dropTarget() 
})) 
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({ 
    connectDragSource: connect.dragSource(), 
    isDragging: monitor.isDragging() 
})) 
export default class Card extends Component { 
    static propTypes = { 
    connectDragSource: PropTypes.func.isRequired, 
    connectDropTarget: PropTypes.func.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> 
    )); 
    } 
} 

    package.json file: 
    { 
    "name": "meteorExample", 
    "private": true, 
    "scripts": { 
    "start": "meteor run" 
    }, 
    "dependencies": { 
    "material-ui": "^0.15.4", 
    "meteor-node-stubs": "~0.2.0", 
    "react": "^15.0.1", 
    "react-addons-pure-render-mixin": "^15.3.2", 
    "react-dnd": "~2.1.4", 
    "react-dnd-html5-backend": "~2.1.2", 
    "react-dom": "^15.3.2", 
    "react-router": "^2.3.0", 
    "react-tap-event-plugin": "^1.0.0", 
    "babel-plugin-react-transform": "~2.0.2", 
    "babel-plugin-transform-class-properties": "~6.11.5", 
    "babel-register": "~6.14.0" 
    }, 
    "devDependencies": { 
    "babel-preset-stage-0": "~6.5.0" 
    } 
} 

Answer 1

你需要在你的項目中添加巴貝爾-插件變換級的屬性

add the following package:

meteor npm install --save-dev babel-plugin-transform-class-properties 

編輯您的package.json，並添加有下列使the package work:

"babel": { 
    "plugins": ["transform-class-properties"] 

    }