在 App.js 代碼中使用了新特性 注解

import React from "react";
import { connect } from "react-redux";
import {addGun,removeGun,addGunAsync} from "./index.redux";

const mapStatetoProps =(state)=>{
  return {num:state}
};

const actionCreators = {addGun,removeGun,addGunAsync}
// App = connect(mapStatetoProps,actionCreators)(App)

@connect(mapStatetoProps,actionCreators)
class App extends React.Component{
  render(){
    // const store = this.props.store
    // const addGun = this.props.addGun 
    // const removeGun = this.props.removeGun
    // const addGunAsync = this.props.addGunAsync
    // const num =this.props.num
    // const num = store.getState()
    return (
      <div>
      <h1>現(xiàn)在有機(jī)槍{this.props.num}把</h1>
      <button onClick={this.props.addGun}>申請(qǐng)武器</button>
      <button onClick={this.props.removeGun}>上交武器</button>
      <button onClick={this.props.addGunAsync}>2秒后申請(qǐng)武器</button>
      {/* <button onClick={()=>{store.dispatch(addGun())}}>申請(qǐng)武器</button>
      <button onClick={()=>{store.dispatch(removeGun())}}>上交武器</button>
      <button onClick={()=>{store.dispatch(addGunAsync())}}>2秒后申請(qǐng)武器</button> */}
      </div>
    )
  }
};


export default App

安裝了 babel-plugin-transform-decorators-legacy 依賴(lài)后 在 package.json 或者 .babellrc文件中 添加

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

結(jié)果報(bào)錯(cuò)

032EF642-3F38-432a-9D64-5027DED2A4D5.png

原因是因?yàn)?babel 版本更新導(dǎo)致的
改用 @babel/plugin-proposal-decorators 插件

npm install @babel/plugin-proposal-decorators --save-dev

package.json 或 .babellrc文件中

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  },

就 OK 了，就可以在 代碼里使用 注解了