无法解释的语法错误。 React，JSX

Question

我遇到了一个我无法解释的语法错误。我对jsx相当陌生并且有反应，所以请和我一起裸照。

代码：

import React, { Component } from 'react'; 

class Button extends Component{ 
    handleClick =() => { 
    this.props.onClickFunction(this.props.incrementValue) 
    } 

    render() { 
    return (
     <button onClick={this.handleClick}> 
     +{this.props.incrementValue} 
     </button> 
    ); 
    } 
} 

错误信息 - 意外的令牌（4:14）：

2 | 
    3 | class Button extends Component{ 
> 4 | handleClick =() => { 
    |    ^
    5 |  this.props.onClickFunction(this.props.incrementValue) 
    6 | } 
    7 | 

我有这个代码之前的工作，但我想用的WebPack和因为这些变化进行实验，我收到此错误。据我了解，这是es2015中引入的新语法。我相信我拥有了一切正确配置：

"devDependencies": { 
    "axios": "^0.17.1", 
    "babel-cli": "^6.26.0", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "bootstrap": "^4.0.0-beta.2", 
    "font-awesome": "^4.7.0", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0", 
    "react-fontawesome": "^1.6.1", 
    "react-scripts": "1.0.17", 
    "reactstrap": "^5.0.0-alpha.4", 
    "webpack": "~3.9.1", 
    "webpack-dev-server": "^2.9.5" 
    } 

module.exports = { 
    entry: "./index.js", 
    output:{ 
     filename:"public/bundle.js" 
    }, 
    module:{ 
     loaders:[ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: 'babel-loader', 
       query:{ 
        presets:['react', 'es2015'] 
       } 
      } 
     ] 
    } 
} 

我的第一个念头是，也许我的ES2015配置不正确。不过，我尝试使用正常功能语法和仍收到以下错误：

2 | 
    3 | class Button extends Component{ 
> 4 | handleClick = function(){ 
    |    ^
    5 |  this.props.onClickFunction(this.props.incrementValue) 
    6 | } 
    7 | 

Answer 1

您需要安装babel-preset-stage-0作为一个开发依赖这样的：

npm install --save-dev babel-preset-stage-0

，最好是在documentation提到你需要把它添加到.babelrc文件，（你可以创建一个.babelrc文件的根目录相同的地方webpack.config.js是），并添加这样的：

{"presets":["react", "es2015", "stage-0"]} 

或者，如果你如果您正在使用webpack.config.js，则可以在您的查询对象中使用：

query: {presets:["react", "es2015", "stage-0"]} 

Answer 2

您将需要添加transform-class-properties plugin
并将其添加到通天的配置：

{ 
    "plugins": [ 
    "transform-class-properties" 
    ] 
}