0

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

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

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>
    )
  }
}

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

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

另外，作为一个附带问题，您如何知道 jsx 文件中有什么问题？什么是解决反应代码的好工具？我选择 brunch 作为构建系统，因为它似乎是最简单的前端入门，它给我的唯一错误是Compiling of app/components/CowClicker.jsx failed.

有关更多上下文：

  • 我的应用程序是使用 设置的brunch new -s react，它放置了一个反应应用程序骨架
  • 如果您有任何 linting / 编译错误发现扩展可以推荐，我将使用 vscode 作为文本编辑器，我将非常感激
  • 我的构建配置（我用早午餐构建）看起来像这样（它是带有早午餐“反应”骨架的默认配置）：

.

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

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

0 回答 0