反应问题 - @是一个意外的令牌

Question

我正在尝试实现react-keydown，可以在此处找到：https://github.com/glortho/react-keydown使用以下代码示例：

＆＃13;

＆＃13;

import React from 'react';
import keydown, { Keys } from 'react-keydown';

class MethodDecoratorExample extends React.Component {
  constructor( props ) {
    super( props );
    this.state = {
      hello: false
    };
  }

  @keydown( 'enter' )
  toggleHello() {
    this.setState( { hello: !this.state.hello } );
  }

  render() {
    return (
      <div>
        <h3>Method Decorator Example</h3>
        <div>Press the <strong>enter</strong> key to toggle hello.</div>
        { this.state.hello &&
          <h1>Enter is key code {Keys.enter}!</h1>
        }
        <div>And click again outside box to see scoping.</div>
      </div>
    );
  }
}

＆＃13;

＆＃13;

＆＃13;

当我尝试这个时，我在@上遇到意外的令牌错误。我不知道如何解决这个问题。

我错过了什么？

由于

Answer 1

Babel 6不再支持ES装饰器语法out of the box，因此您需要安装babel-plugin-transform-decorators-legacy插件。

安装babel-plugin-transform-decorators-legacy

npm install --save-dev babel-plugin-transform-decorators-legacy

在.babelrc

中添加插件

{
  "plugins": [
    "transform-decorators-legacy"
  ]
}

或

直接在webpack.config.js

中添加加载程序

{
  test: /\.jsx?$/,
  loader: 'babel',
  query: {
    cacheDirectory: true,
    plugins: ['transform-decorators-legacy' ]
  }
}

Answer 2

我在这里找到答案：How do I get decorators working with babel & webpack?

感谢@cbll提到装饰者，因为我不知道这是正确的术语。帮助我寻找解决方案