添加类属性时反应语法错误答案

【问题标题】：React syntax error when adding class properties添加类属性时反应语法错误
【发布时间】：2017-03-18 18:20:43
【问题描述】：

我正在用 babel 和 webpack 编写一个 react 应用程序。在我尝试在一个类上添加一个属性之前，它一直进展顺利——特别是尝试使用 React-Toolbox (http://react-toolbox.com/#/components/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 =' 声明处。这是完整的错误：

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)

我以前没有遇到过这种情况，但以前我只有在类上声明的方法。

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

我会确保你正确设置了 babel。您可能缺少用于类属性的插件，这是一个实验性功能。

.babelrc

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

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

【讨论】：

【解决方案2】：

你可以这样写你的组件

class ChordFilters extends Component {

  constructor() {
    super();
    this.state = {
       value: 'Mandolin',
    };

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

状态是一个类实例变量。您应该使用构造函数来初始化这些变量。否则你必须使用

{
  "plugins": ["syntax-class-properties"]
}

在 .babelrc 文件中让 babel 知道属性。

【讨论】：