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. PC逆向之代码还原技术,第三讲汇编中加法的代码还原

    目录 PC逆向之代码还原技术,第三讲汇编中加法的代码还原 一丶汇编简介 二丶高级代码对应汇编观看. 1.代码还原解析: 总结 PC逆向之代码还原技术,第三讲汇编中加法的代码还原 一丶汇编简介 在讲解加 ...

  2. Mysql 主键如何实现持久化

    自增主键没有持久化是个比较早的bug,这点从其在官方bug网站的id号也可看出(https://bugs.mysql.com/bug.php?id=199) 首先,我们可以直观的重现如下. mysql ...

  3. C#/VB.NET 操作Word批注(二)——如何插入图片、读取、回复Word批注内容

    序 在前面的文章C# 如何插入.修改.删除Word批注一文中介绍了如何操作Word批注的一些方法,在本篇文章中继续介绍操作Word批注的方法.分以下三种情况来介绍: 1. 插入图片到Word批注 2. ...

  4. 【Java】List遍历时删除元素的正确方式

    当要删除ArrayList里面的某个元素,一不注意就容易出bug.今天就给大家说一下在ArrayList循环遍历并删除元素的问题.首先请看下面的例子: import java.util.ArrayLi ...

  5. 微信小程序---require()

    我们可以通过require()来获取其它文件导出的数据,但要注意的是传给require的路径只能是相对路径. // 获取指定页面通过module.exports导出的数据 var postsData ...

  6. 2-SAT速成

    本文只做总结性说明 2-SAT 2-SAT是k-SAT问题的一种,k-SAT问题在\(k>=3\)时已经被证明是NP完全问题 2-SAT问题定义比较简单 有n个布尔变量\(x_1-x_n\).给 ...

  7. iOS----------禁止输入汉字

    说明: ^.*[\u4e00-\u9fa5].*$ 是否包含中文^[\u4E00-\u9FA5]+$ 是否全中文 - (BOOL)textField:(UITextField *)textField ...

  8. AspNetCore.FileLog 一款很不错的日志记录工具

    AspNetCore.FileLog 该项目作者为伟哥,GitHub地址:https://github.com/amh1979:该项目维护者为鸟窝,GitHub地址:https://github.co ...

  9. 容器化系列 - GitLab启动和配置 on Docker

    本文简单说明了如何在Docker容器中运行GitLab. 1 准备工作 1.1 下载镜像 $ docker pull docker.io/gitlab/gitlab-ce:latest 1.2 创建持 ...

  10. ICD

    International Classification of Diseases,ICD 国际疾病分类