我正在用babel和webpack编写React应用程序。一直到我尝试在类上添加属性之前,它一直运行得很好-特别是尝试使用React- Toolbox(http://react-toolbox.com/#/components/dropdown)中的Dropdown 并暂时数据连接后,我直接复制了此内容:
class DropdownTest extends React.Component { state = { value: 'ES-es', }; handleChange = (value) => { this.setState({value: value}); }; render () {}
这是我的稍作修改的版本:
class ChordFilters extends Component { state = { value: 'Mandolin', }; handleChange = (value) => { this.setState({value: value}); }; render() {
添加state对象后,在webpack:中Syntax Error, unexpected Token,在“ state =”声明中出现了错误。这是完整的错误:
state
Syntax Error, unexpected Token
at Parser.pp.raise (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/location.js:24:13) at Parser.pp.unexpected (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/util.js:82:8) at Parser.pp.parseClassProperty (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/statement.js:624:61) at Parser.parseClassProperty (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/plugins/flow.js:797:20) at Parser.pp.parseClass (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/statement.js:567:32) at Parser.pp.parseStatement (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/statement.js:84:19) at Parser.parseStatement (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/plugins/flow.js:621:22) at Parser.pp.parseTopLevel (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/statement.js:30:21) at Parser.parse (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/parser/index.js:70:17) at Object.parse (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babylon/lib/index.js:45:50) at Object.exports.default (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babel-core/lib/helpers/parse.js:36:18) at File.parse (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:574:40) at File.parseCode (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:691:20) at /Users/amaiale/chordb/node_modules/babel-loader/node_modules/babel-core/lib/transformation/pipeline.js:167:12 at File.wrap (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:639:16) at Pipeline.transform (/Users/amaiale/chordb/node_modules/babel-loader/node_modules/babel-core/lib/transformation/pipeline.js:165:17)
我以前没有遇到过,但是以前我只在类中声明过方法。
我会确保您设置了正确的Babel。您可能缺少用于类属性的插件,这是一项实验性功能。
.babelrc
{ "presets": ["react", "es2015"], "plugins": ["transform-class-properties"] }
您可以通过npm获取插件: npm i -D babel-plugin-transform-class-properties
npm i -D babel-plugin-transform-class-properties