Question

我在React组件中使用es2015 Arrow函数，在我声明myfunction() {...}时抛出错误。如果像myFunction : function () {...}这样写，则该错误不存在。我没有使用Browserify / Babelify编译任何问题 - 这只发生在下面的例子中。

import React from 'react';

module.exports =  React.createClass({
  // render : function () { // <--- this works
  render() { // <---- this throws an error
    return (
      <div>Kaboom.</div>
      );
  }
});

/* RenderService.js */
require("babel-register")({
  plugins: ["transform-react-jsx","transform-es2015-modules-commonjs"]
});

var React = require('react');
var ReactDOMServer = require('react-dom/server');

module.exports = {
  renderReport : function (reportId) {
    var TestComp =  require('./TestCompoennt');

    var ReactComponent = React.createFactory(TestComp,'div');

    return ReactDOMServer.renderToStaticMarkup(ReactComponent());
  }
};

错误：renderApproval（）{ ^ SyntaxError：意外的令牌（

Answer 1

也许你应该使用预设-es2015，这个插件包含transform-es2015-shorthand-properties，你需要改变它：

var z = function() { return 'z'; };
var x = {
  z
}

到此：

var z = function() { return 'z'; };
var x = {
  z: z
}

或者在你的情况下

var x = {
  z() {
    return 'z';
  }
}

还包括：

签ES2015常数
变换ES2015箭头函数
变换ES2015块范围的函数
变换ES2015 - 嵌段 - 作用域
变换ES2015类
变换ES2015计算的的属性
变换ES2015-解构
变换ES2015换的
变换ES2015-函数名称
变换ES2015-文字
变换ES2015模块-CommonJS的
变换ES2015对象超
变换ES2015参数
变换ES2015-速记的属性
变换ES2015扩展
变换ES2015粘性正则表达式
变换ES2015-模板文字
变换ES2015-typeof运算符号
变换ES2015-Unicode的正则表达式
变换 - 再生器

链接http://babeljs.io/docs/plugins/preset-es2015/

Babel es2015箭头功能错误

1 个答案: