码迷,mamicode.com
首页 > 其他好文 > 详细

React-使用装饰器

时间:2019-10-23 11:31:27      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:plugins   body   gpo   mic   tran   post   exp   log   提交   

  create-react-app默认不支持装饰器的,需要做以下配置。

  打开 package.json ,可以看到eject。运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来。

技术图片
{
  ...
  "scripts": {
   ...
    "eject": "react-scripts eject"
  },
  ...
}
技术图片

运行 npm run eject 

  此时,项目中多了一个config文件,并且各个配置文件已经暴露出来了。(运行npm run eject之前,保证本地没有待提交到git的文件)

技术图片

安装babel插件
  Babel >= 7.x

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

  Babel@6.x

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

修改package.json文件的babel配置项
  Babel >= 7.x

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

  Babel@6.x

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

至此,就可以在项目中使用装饰器了

技术图片
@MyContainer
class B extends Component{
  render(){
    return (
      <p>B组件</p>
    )
  }
}
export default B;
技术图片

React-使用装饰器

标签:plugins   body   gpo   mic   tran   post   exp   log   提交   

原文地址:https://www.cnblogs.com/yf2196717/p/11724932.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!