添加类属性时反应语法错误 [英] React syntax error when adding class properties

问题描述

我正在用babel和webpack编写一个React应用.一直到我尝试在类上添加属性之前，一切都进行得很好-特别是尝试使用来自React-Toolbox的Dropdown( http://react-toolbox.com/#/components/dropdown )，并且暂时在连接数据之前，我直接复制了此内容:

I'm writing a react app with babel and webpack. It's been going along well until I tried to add a property on a class - specifically trying to use a Dropdown from React-Toolbox (http://react-toolbox.com/#/components/dropdown) and for the time being before getting data connected, I directly copied this:

class DropdownTest extends React.Component {
    state = {
        value: 'ES-es',
    };

    handleChange = (value) => {
        this.setState({value: value});
    };

    render () {}

这是我的稍作修改的版本:

Here is my very-slightly-modified version:

class ChordFilters extends Component {
    state = {
      value: 'Mandolin',
    };

    handleChange = (value) => {
      this.setState({value: value});
    };

    render() {

添加state对象后，在状态=声明中的webpack:Syntax Error, unexpected Token中出现错误.这是完整的错误:

As soon as I added the state object, I got an error in webpack: Syntax Error, unexpected Token, at the 'state =' declaration. Here's the full error:

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)

我以前没有遇到过，但是以前我只在类中声明过方法.

I haven't run into this before but previously I only had methods declared on the class.

推荐答案

我将确保您已正确设置babel.您可能缺少用于类属性的插件，这是一项实验性功能.

I would make sure you have babel set up right. You're probably missing the plugin for class properties, which is an experimental feature.

.babelrc

{
  "presets": ["react", "es2015"],
  "plugins": ["transform-class-properties"]
}

您可以通过npm获取插件:npm i -D babel-plugin-transform-class-properties

You can get the plugin via npm: npm i -D babel-plugin-transform-class-properties

这篇关于添加类属性时反应语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！