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-使用装饰器的更多相关文章

  1. react mobx 装饰器语法配置

    1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add . 2.git commit -m & ...

  2. 在react中用装饰器来装饰connect

    假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...

  3. React支持装饰器

    在用mobx时用到了装饰器,无奈环境不支持装饰器,搜索了半天,网上教程乱七八糟,最后想到了babel官网上肯定有,一搜果然有,安装教程 见Babel官网. 最快捷的教程是官网文档

  4. react withClamp装饰器

    Clamp.js 等待异步数据加载完后在初始化$clamp withClamp.js import React, { Component } from "react"; expor ...

  5. ES 6 装饰器与 React 高阶组件

    关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了,两种说法都有,这种问题懒得纠结了--在用的时候发现这个东西很好用,平常用处可能不大,但是结合 React 就很 ...

  6. 【react】---react中使用装饰器

    一.creact-react-app中使用装饰器 运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来 此时,项目中多了一个config文件,并且各个配 ...

  7. JS 装饰器解析

    随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因. 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux ...

  8. Javascript 装饰器极速指南

    pablo.png Decorators 是ES7中添加的JavaScript新特性.熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的 ...

  9. ES6 系列之我们来聊聊装饰器

    Decorator 装饰器主要用于: 装饰类 装饰方法或属性 装饰类 @annotation class MyClass { } function annotation(target) { targe ...

  10. MobX基础 ----- 类的静态属性和装饰器

    当我们使用MobX的时候,首先要声明一个store, 用来保存状态,它的最基本的语法 如下: class Todo { @observable title = ""; @obser ...

随机推荐

  1. Kubernetes 弹性伸缩全场景解析 (四)- 让核心组件充满弹性

    前言 在本系列的前三篇中,我们介绍了弹性伸缩的整体布局以及HPA的一些原理,HPA的部分还遗留了一些内容需要进行详细解析.在准备这部分内容的期间,会穿插几篇弹性伸缩组件的最佳实践.今天我们要讲解的是 ...

  2. RocketMQ源码分析之RocketMQ事务消息实现原理上篇(二阶段提交)

    在阅读本文前,若您对RocketMQ技术感兴趣,请加入 RocketMQ技术交流群 根据上文的描述,发送事务消息的入口为: TransactionMQProducer#sendMessageInTra ...

  3. NTP服务器搭建

    NTP服务器搭建 :http://www.jbxue.com/LINUXjishu/22352.html 客户端配置: vim /etc/ntp.conf #server 0.centos.pool. ...

  4. 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU启动那些事(9)- 从Parallel NOR启动

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RT系列MCU的Parallel NOR启动. 上一篇讲i.MXRT从Raw NAND启动的文章 从Raw NAND启 ...

  5. 使用Advanced Installer制作IIS安装包(一:配置IIS和Web.config)

    前言:大过年的,写篇文章不容易,还是给自己点个赞~~年前找了下.net安装包的制作方法,发现Visual Studio自带的制作工具使用起来非常麻烦,需要单独下载安装包,并且什么激活认证等等屁事相当麻 ...

  6. VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——ImageTabBar控件的使用方式

    一.          样式一 我们要实现上图中的效果,需要如下的操作: 从工具栏上的“Smobiler Components”拖动一个ImageTabBar控件到窗体界面上 修改ImageTabBa ...

  7. .Net Core 实践 - 使用log4net记录日志(2)

    实现目标:将log4net的相关操作封装成一个 .Net Standard类库 demo地址:https://github.com/PuzzledAlien/log4net_demo/tree/mas ...

  8. PHP中的Define和Const区别

    我们经常把不经常变的值定义成常量,常量一般用全部大写来表示,前面不加美元符号,那么define和const有什么区别呢? 常量是一个简单的标识符.在脚本执行期间该值不能改变(除了所谓的魔术常量,他们其 ...

  9. 编译内核时出现drivers/mfd/mxc-hdmi-core.c:36:24: fatal error: mach/clock.h: No such file or directory

    在学习恩智浦IMX6D开发板时,编译内核出现 drivers/mfd/mxc-hdmi-core.c::: fatal error: mach/clock.h: No such file or dir ...

  10. json-gson:.isJsonNull()问题-堆栈溢出

    不用管我下面的第一个答案.我读得太快了. 看起来这是一个简单的例子,文件撒谎-或者至少是被误解了.幸运的是,代码并不是那么简单,而且gson是一个开源项目. 这是 JsonObject.get(Str ...