javascript - Babel Decorators 转换，无论我尝试什么，都会不断获得意想不到的标记(使用 React 项目)

Question

我已经通过 StackO 进行了大量搜索，试图找到答案，但我一直遇到同样的错误，unexpected token

每当我使用 text decorator transpile 来更正错误时，我的组件中仍然会遇到同样的问题。

我的错误是:

./src/components/pages/projectpages/dnd2/Card.js
Syntax error: Unexpected token (71:0)

  69 | };
  70 | 
> 71 | @DropTarget(ItemTypes.CARD, cardTarget, connect => ({
     | ^
  72 |   connectDropTarget: connect.dropTarget(),
  73 | }))
  74 | @DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({

这就是我在 package.json 中设置它的方式(我已经尝试过第 1 阶段，但也没有成功)

{
  "name": "my-app",
  "version": "0.1.0",
  "babel": {
    "plugins": [
      "transform-decorators"
    ]
  },
  "stage": 0,
  "private": true,
  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "date-fns": "^1.28.5",
    "dragula": "^3.7.2",
    "flexbox-react": "^4.3.3",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "react": "^15.6.1",
    "react-css-transition-replace": "^2.2.1",
    "react-dnd": "^2.4.0",
    "react-dnd-html5-backend": "^2.4.1",
    "react-dom": "^15.6.1",
    "react-dragula": "^1.1.17",
    "react-fa": "^4.2.0",
    "react-flexbox-grid": "^1.1.3",
    "react-fontawesome": "^1.6.1",
    "react-image-compare": "0.0.1",
    "react-jsonschema-form": "^0.49.0",
    "react-modal": "^1.9.4",
    "react-moment": "^0.2.4",
    "react-router-dom": "^4.1.1",
    "react-toggle-display": "^2.2.0",
    "react-transition-group": "^1.2.0",
    "simple-react-forms": "^1.3.0",
    "styled-components": "^1.4.6",
    "styled-props": "^0.2.0"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我还缺少什么？

Answer 1

在你的 package.json 文件中

"babel": {
  "plugins": [
    "transform-decorators"
  ]
},

应替换为

"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ]
},

请记住，装饰器可以编写为简单的 JS 函数。

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
 connectDropTarget: connect.dropTarget(),
}))

相当于

DropTarget(ItemTypes.CARD, cardTarget, connect => ({
 connectDropTarget: connect.dropTarget(),
}))(YourClassName)

换句话说，@ 符号充当装饰器之后的任何类的 (YourClassName)。

您可以阅读更多关于 EcmaScript 装饰器的信息 here .

编辑:

如果你想应用到其中的一个或多个，你可以像这样嵌套它们

DropTarget(...)(DragSource(...)(YourClassName))

或者像这样

const withDropTarget = DropTarget(...)(YourClassName)
const withDragSource = DragSource(...)(withDropTarget)
export default withDragSource

或使用 compose helper ，这将允许您像这样编写代码

const enhance = compose(
  DropTarget(...),
  DragSource(...)
)

export default enhance(YourClassName)