Question

我正在尝试用反应项目在我的流星中实施react-dnd。

我收到这样的错误：错误阻止了启动：

使用ecmascript处理文件时（对于目标web.browser）： client / 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

您需要添加babel-plugin-transform-class-properties

add the following package:

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

在项目中编辑package.json，并在其中添加以下内容以生成the package work:

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

  }

meteor-react -Missing类属性转换

1 个答案: