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. Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从ht ...

  2. 第23章 Windows身份验证 - Identity Server 4 中文文档(v1.0.0)

    在支持的平台上,您可以使用IdentityServer使用Windows身份验证对用户进行身份验证(例如,针对Active Directory).当前使用以下命令托管IdentityServer时,W ...

  3. C# Redis 过期机制不生效问题

    引用: https://ask.csdn.net/questions/358802 根据这里的代码写出监听事件后,事件并没有生效 在比对了多次配置文件后,终于发现了一点蹊跷,在配置中不能有与之相冲的配 ...

  4. 使用Jenkins自动发布Windows服务项目

    不同于发布Web项目,自动发布Windows服务项目需要解决以下几个问题: 如何远程停止和开启服务?需要在发布前停止服务,在发布完成后开启服务. 如何上传编译文件到目标服务器? 问题1:如何远程停止和 ...

  5. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  6. 23 , CSS 构造列表与导航

    1. 列表图片 2. 背景列表 3. 翻转列表 4. 水平导航 1. 内边距与外边距 Ul { Margin: 0; Padding: 0; } 2. 使用图片作为列表图标 Ul { Margin: ...

  7. 自然底数e的意义是什么?

    自然底数e的意义是什么? https://mp.weixin.qq.com/s?__biz=MzA5ODUxOTA5Mg==&mid=2652553811&idx=1&sn=0 ...

  8. ArcGIS 10.0发布缓存地图服务(详细版)

    1.软件准备ArcGIS Destop10.0,ArcGIS Server10.0,Windows系统下自带的IIS6.0以上服务器 1)安装ArcGIS Destop10.0软件,选择完全安装,安装 ...

  9. Arcgis for Javascript 对接iServer发布的Mapserver服务

    测试说明 webgis开发流程一般是: 数据处理 ---发布服务---SDK开发.除了开源的服务以外,一般各GIS厂商都是自己的服务自己的SDK才能对接. SuperMap  iServer 提供了将 ...

  10. Vsphere 回收未消使用的磁盘空间

    下载sdelete.exe 执行 sdelete.exe -z E: ,然后又恢复为原可用空间 关机   SHH进入物理主机,找到对应的虚机文件 执行vmkfstools -K test-Win200 ...