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. 深入解读阿里云数据库POLARDB核心功能物理复制技术

    日志是数据库的重要组成部份,按顺序以增量的方式记录了数据库上所有的操作,日志模块的设计对于数据库的可靠性.稳定性和性能都非常重要. 可靠性方面,在有一个数据文件的基础全量备份后,对运行中的数据库来说, ...

  2. Data Source与数据库连接池简介 JDBC简介(八)

    DataSource是作为DriverManager的替代品而推出的,DataSource 对象是获取连接的首选方法. 起源 为何放弃DriverManager DriverManager负责管理驱动 ...

  3. Perl IO:read()函数

    read()函数 read()函数用于从文件句柄中读取指定字节数的数据并写入到一个标量中.如果文件句柄是以Unicode方式打开的,则表示读取指定字符数而非字节数. 有两种read方式: read F ...

  4. [转]快速新建简单的koa2后端服务

    本文转自:https://blog.csdn.net/saucxs/article/details/83788259 既然前端工程化是基于NodeJS,那么选择NodeJs做前后端分离部署也是理所应当 ...

  5. My操作小技巧

    1.当我们新增一条数据之后想要获取其自增长的id,可以紧随新增语句后调用 SELECT last_insert_id();即可获得,一般搭配变量一起使用 SELECT @newUserId:=last ...

  6. 百万级开源MQTT消息服务器 搭建

    下载地址:http://emqtt.com/downloads 文档地址:http://emqtt.com/docs/v2/index.html 开始使用EMQ 2.0 消息服务器简介EMQ (Erl ...

  7. C#服务器控件 IsReadOnly 和 Visibility,IsEnable 的区别

    IsReadOnly  适用于“输入.输出”类控件,比如TextBox类, 可以当做文本输入,也可以通过后台代码进行输出. 设置 IsReadOnly(只读) = true 后,该控件只允许输出,不允 ...

  8. 【Nginx】使用nginx反向代理IIS实现80端口的解放

    下载版本: 官网地址:http://nginx.org/en/download.html 我使用了稳定版本. 下载完成之后进行目录解压,解压之后大概就是这个样子: 网上很多人写这些了想了解概念的百度一 ...

  9. C# 如何创建Excel多级分组

    在Excel中如果能够将具有多级明细的数据进行分组显示,可以清晰地展示数据表格的整体结构,使整个文档具有一定层次感.根据需要设置显示或者隐藏分类数据下的详细信息,在便于数据查看.管理的同时也使文档更具 ...

  10. Java 学习笔记 两大集合框架Map和Collection

    两大框架图解 Collection接口 由第一张图,我们可以知道,Collection接口的子接口有三种,分别是List接口,Set接口和Queue接口 List接口 允许有重复的元素,元素按照添加的 ...