如何在React中使用npm包“ react-classy”？

Question

I'm going to use the "npm" package "react-classy" in my react project. But I came across the syntax issue in my code. I created the react classy project by using "npx create-react-app classy". And then I installed the react-classy package in classy project. And I created the button.js for using the react-classy package. I imported the button.js in app.js. And then I came across the syntax issue in the button.js. Here is the following file:

import React, { Component } from 'react';
import Classy from 'react-classy';

@Classy

export default class Button extends Component {

    static style = `
    .button {
      background: blue;
    }
  `
    render() {
        return (
            <button className="button">
                {this.props.children}
            </button>
        );
    }
}

In this file, @ is the issue. Please let me know what is the reason. Thanks.

Answer 1

To use decorators in your create-react-app project you'll have to eject

npm eject

then

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

then in your package.json add this

"babel": {
  "plugins": ["babel-plugin-transform-decorators-legacy"],
  "presets": ["react-app"]
},