React问题-@是意外令牌

Question

I'm trying to implement react-keydown which can be found here: https://github.com/glortho/react-keydown using the following code example:

 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> ); } } 

When I try this I get an unexpected token error on the @. I have no clue how to solve this.

What am I missing?

Thanks

Answer 1

Babel 6 no longer supports ES decorator syntax out of the box so you need to install the babel-plugin-transform-decorators-legacy plugin.

Install babel-plugin-transform-decorators-legacy

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

Add the plugin in your .babelrc

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

or

add the loader directly in your webpack.config.js

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

Answer 2

I found the answer here: How do I get decorators working with babel & webpack?

Thanks to @cbll for mentioning decorators, because I did not know that that is the correct term. Helped me with searching for solutions