使用注解@connect报错

在 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>现在有机枪{this.props.num}把</h1>
      <button onClick={this.props.addGun}>申请武器</button>
      <button onClick={this.props.removeGun}>上交武器</button>
      <button onClick={this.props.addGunAsync}>2秒后申请武器</button>
      {/* <button onClick={()=>{store.dispatch(addGun())}}>申请武器</button>
      <button onClick={()=>{store.dispatch(removeGun())}}>上交武器</button>
      <button onClick={()=>{store.dispatch(addGunAsync())}}>2秒后申请武器</button> */}
      </div>
    )
  }
};


export default App

安装了 babel-plugin-transform-decorators-legacy 依赖后在 package.json 或者 .babellrc文件中添加

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

结果报错

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

原因是因为 babel 版本更新导致的
改用 @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 了，就可以在代码里使用注解了

使用注解@connect报错

推荐阅读更多精彩内容