无法解释的语法错误。 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