ES6 箭头函数绑定和 gulp 编译错误答案

【问题标题】：ES6 arrow function binding and gulp compiling errorES6 箭头函数绑定和 gulp 编译错误
【发布时间】：2016-01-28 11:05:08
【问题描述】：

通过阅读官方 ES6 文档和其他博客，我一直在努力完成下面的代码段：

onHomeStoreChange = () => (newState) {
    this.setState(newState);
}

我用过这个link。但似乎 gulp 没有正确完成它的工作，我收到 A semicolon is required after a class property 错误，但即使放置一个 this 仍然是 undefined。这是使用转换的 gulp 文件的一部分。

appBundler
    // transform ES6 and JSX to ES5 with babelify
    .transform("babelify", {presets: ["es2015", "stage-0", "react"]})
        //.transform(babelify.configure({stage: 0}))
    .bundle()
    .on('error',gutil.log)
    .pipe(source('bundle.js'))
    .pipe(gulp.dest(buildDestination));

我使用 react 0.14.5，这些是我的开发依赖项。

"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"babelify": "7.2.0",
"browserify": "^12.0.1",
"gulp": "^3.9.0",
"gulp-if": "^2.0.0",
"gulp-streamify": "^1.0.2",
"gulp-uglify": "^1.5.1",
"gulp-util": "^3.0.7",
"vinyl-source-stream": "^1.1.0"

我很困惑，任何帮助将不胜感激。

编辑 - 添加反应完整代码

export default class App extends React.Component {
  constructor(props) { //put componentWillMount code in constructor
    super(props);

    //this.bindMethods();
    this.state = HomeStore.getState();
  }

  componentDidMount() {
    HomeStore.listen(this.onHomeStoreChange);
  }

  componentWillUnmount() {
    HomeStore.unListen(this.onHomeStoreChange);
  }

  onHomeStoreChange = (newState) => {
    //I had syntax error here
    this.setState(newState);
  }

  render() {
      return (
        <div>
          components will go here
        </div>
      );
  }

  bindMethods() {
    this.onHomeStoreChange = this.onHomeStoreChange.bind(this);
  }
}

如果我使用 bindMethods() 它可以工作但不是 =>

【问题讨论】：

你能不能也显示这个段的实际代码？
像这样使用它：onHomeStoreChange = (newState) => this.setState(newState);
@thefourtheye 更新
你为什么还要用箭头函数呢？
类属性是 ES7！由于还没有标准，这是一个实验性功能。提议的规范要求使用分号。

标签： reactjs gulp ecmascript-6

【解决方案1】：

你有一组额外的括号。箭头函数的参数应该放在第一组括号中：

onHomeStoreChange = (newState) => {
    this.setState(newState);
};

您看到的错误是因为您已有效地将onHomeStoreChange 定义为() => (newState)，然后在其后加上额外的{...} 块。

【讨论】：

嗨 N3dst4。你部分正确，我有语法错误，看看这个链接babeljs.io/blog/2015/06/07/react-on-es6-plus/#arrow-functions 但现在它对分号很讨厌，我说它没关系。但是有些教程没有分号。
如果函数是非原生的react组件方法，放分号很蹩脚。
是的，您可能不需要分号。您确实需要修复箭头函数语法；）
已修复。知道为什么 gulp 现在会抛出分号错误吗？
关于删除该限制 github.com/feross/standard/issues/372 存在一个未解决的 Babel 问题。似乎它只是标准的一部分（要求在类属性上使用分号）并被添加到 babel。