Question

我有一个没有箭头功能的反应组件（下面已注释掉），但我希望能够使用箭头功能而不是手动绑定每个功能。

这个（未注释掉的部分）是我尝试过的：

import React from 'react'

export default class CowClicker extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      clicks: 0
    }
    // this.onCowClick = this.onCowClick.bind(this) 
    // that makes it work if I use a normal function instead of a fat arrow one for onCowClick
  }

  // alternative that works: onCowClick(evt) {...}
  onCowClick = (evt) => {
    this.setState({
      clicks: this.state.clicks + 1
    })
  }

  render() {
    return (
      <div>
        <div>Clicks: {this.state.clicks}</div>
        <img
          src="http://s3.bypaulshen.com/buildwithreact/cow.png"
          onClick={this.onCowClick}
          className="cow"
          />
        <p>Click the cow</p>
      </div>
    )
  }
}

如何在项目中启用箭头功能？

This link 似乎是解决方案的一部分，但作为一个前端新手，我不知道如何应用它。

另外，作为一个附带问题，你怎么知道jsx文件中有什么问题？什么是排除反应代码故障的好工具？我选择了早午餐作为构建系统，因为它似乎最简单的开始使用前端，它给我的唯一错误是Compiling of app/components/CowClicker.jsx failed.

更多背景信息：

我的应用程序是使用brunch new -s react设置的，它将反应应用程序框架放在适当位置
我正在使用vscode作为文本编辑器，如果你有任何linting / compilation错误发现扩展推荐，我绝对会感激
我的构建配置（我用早午餐构建）看起来像这样（这是默认的'反应'骨架早午餐）：

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^(?!app)/,
        'app.js': /^app/
      }
    },
    stylesheets: {joinTo: 'app.css'}
  },

  plugins: {
    babel: {presets: ['es2015', 'react']}
  }
};

如何正确使用箭头为ES6 React类功能？

0 个答案: