Question

我用Mocha测试我的React组件，当我运行npm测试时，我得到了异常

SyntaxError: /Users/igunchenko/WorkProjects/Cloud_App/cloud.webapp/cloud.webapp.web/src/main/ui/app/DOM/pages/AdminPanel.js: Unexpected token (18:10)
16 | @connect()
17 | export class AdminPage extends Component {
18 |     state = {
   |           ^

在.babelrc中我描述了我的反应应用程序的预设和插件：

{
  "presets": [ "es2015", "stage-2", "react"],
  "plugins": ["transform-decorators"]
}

但是，没有任何改变。我在配置中失去了什么？这个问题怎么解决？

Answer 1

看起来应该更像;

export default class AdminPage extends React.Component {
  constructor() {
    super();
    this.state = {something: ''};
  }

Answer 2

您可以尝试以下方法。它帮助了我。将其添加到＆＃34; .babelrc＆＃34;

  "presets": ["es2015", "react", "stage-0"],
  "plugins": ["transform-decorators-legacy"],

这是你的＆＃34; package.json＆＃34; DevDepedencies

"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-stage-0": "^6.3.13",

然后使用＆＃34; npm i＆＃34;更新您的项目希望它能帮到你。

Answer 3

你只是应用了转换插件，而忽略了装饰器的语法。你可以，

    $scope.drop=$scope.states.Id;
     console.log($scope.drop);
 $http({

    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/Lists/getByTitle('City')/items?$select=State/Title,Title,Id,*&$expand=State",  
    method: "GET",
    headers: { "Accept": "application/json; odata=verbose" }
    })
    .success(function (data, status, headers, config) {  

       $scope.city=filterFilter(data.d.results,{StateId:$scope.drop});
       console.log($scope.city);

    })
   .error (function(data, status, headers, config) {  })

或者，在撰写本文时，“阶级和财产装饰者”处于第1阶段。https://github.com/tc39/proposals

所以你可以使用

{
  "presets": ["es2015", "stage-2", "react"],
  "plugins": ["syntax-decorators", "transform-decorators"]
}

意外的令牌=在摩卡反应测试中

3 个答案: