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

我遇到了一个我无法解释的语法错误。我对jsx相当陌生并且有反应,所以请和我一起裸照。无法解释的语法错误。 React,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 |

回答:

您需要安装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"]} 

回答:

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

{ 

"plugins": [

"transform-class-properties"

]

}

以上是 无法解释的语法错误。 React,JSX 的全部内容, 来源链接: utcz.com/qa/258561.html

回到顶部