Reactjs 添加类属性时出现React语法错误
我正在用babel和webpack编写一个react应用程序。在我尝试在类上添加属性之前一直进展顺利,特别是尝试使用React Toolbox()中的下拉菜单,在连接数据之前,我直接复制了以下内容:Reactjs 添加类属性时出现React语法错误,reactjs,webpack,babeljs,Reactjs,Webpack,Babeljs,我正在用babel和webpack编写一个react应用程序。在我尝试在类上添加属性之前一直进展顺利,特别是尝试使用React Toolbox()中的下拉菜单,在连接数据之前,我直接复制了以下内容: class DropdownTest extends React.Component { state = { value: 'ES-es', }; handleChange = (value) => { this.setState({v
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中得到了一个错误:语法错误,在“state=”声明中出现了意外的标记。以下是全部错误:
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)
我以前没有遇到过这种情况,但以前我只在类上声明了方法 我会确保你把巴贝尔安排好的。您可能缺少类属性的插件,这是一个实验性的特性
.babelrc
{
"presets": ["react", "es2015"],
"plugins": ["transform-class-properties"]
}
您可以通过npm获得插件:npm i-D babel插件转换类属性
您可以这样编写组件
class ChordFilters extends Component {
constructor() {
super();
this.state = {
value: 'Mandolin',
};
handleChange = (value) => {
this.setState({value: value});
};
状态是一个类实例变量。您应该使用构造函数初始化这些变量。否则你必须使用
{
"plugins": ["syntax-class-properties"]
}
在.babelrc文件中,让babel了解属性