React-使用装饰器
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-使用装饰器的更多相关文章
- react mobx 装饰器语法配置
1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add . 2.git commit -m & ...
- 在react中用装饰器来装饰connect
假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...
- React支持装饰器
在用mobx时用到了装饰器,无奈环境不支持装饰器,搜索了半天,网上教程乱七八糟,最后想到了babel官网上肯定有,一搜果然有,安装教程 见Babel官网. 最快捷的教程是官网文档
- react withClamp装饰器
Clamp.js 等待异步数据加载完后在初始化$clamp withClamp.js import React, { Component } from "react"; expor ...
- ES 6 装饰器与 React 高阶组件
关于 Decorator 到底是 ES 6 引入的还是 ES 7 引入的我也不是很明白了,两种说法都有,这种问题懒得纠结了--在用的时候发现这个东西很好用,平常用处可能不大,但是结合 React 就很 ...
- 【react】---react中使用装饰器
一.creact-react-app中使用装饰器 运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来 此时,项目中多了一个config文件,并且各个配 ...
- JS 装饰器解析
随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因. 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux ...
- Javascript 装饰器极速指南
pablo.png Decorators 是ES7中添加的JavaScript新特性.熟悉Typescript的同学应该更早的接触到这个特性,TypeScript早些时候已经支持Decorators的 ...
- ES6 系列之我们来聊聊装饰器
Decorator 装饰器主要用于: 装饰类 装饰方法或属性 装饰类 @annotation class MyClass { } function annotation(target) { targe ...
- MobX基础 ----- 类的静态属性和装饰器
当我们使用MobX的时候,首先要声明一个store, 用来保存状态,它的最基本的语法 如下: class Todo { @observable title = ""; @obser ...
随机推荐
- 离线批量数据通道Tunnel的最佳实践及常见问题
基本介绍及应用场景 Tunnel是MaxCompute提供的离线批量数据通道服务,主要提供大批量离线数据上传和下载,仅提供每次批量大于等于64MB数据的场景,小批量流式数据场景请使用DataHub实时 ...
- Redis Codis 部署安装
背景 关于Redis的高可用除了只身的Sentinel和Cluster之外,还有一个用的比较多的是Codis,由于公司的Redis大部分都使用Codis,本文就针对Codis进行相关的安装部署进行说明 ...
- 第16章 使用ASP.NET Core Identity - Identity Server 4 中文文档(v1.0.0)
注意 对于任何先决条件(例如模板),首先要查看概述. IdentityServer旨在提供灵活性,其中一部分允许您为用户及其数据(包括账户密码)使用所需的任何数据库.如果您从新的用户数据库开始,那么A ...
- C#基础-九九乘法表和冒泡排序
//乘法表 ; i < ; i++)//行 { ; j < ; j++)//列 { if (j <= i) { Console.Write("{0}*{1}={2}\t&q ...
- [日常] nginx记录post数据
1.使用log_format指令来更改日志格式,该指令只能放在http{}段 log_format 日志名 '日志内容'; server { access_log /var/log/nginx/d ...
- 学JAVA第四天,JAVA获取年月日
先添加引用import java.util.Calendar; 然后编写代码: Calendar calendar = null;//声明 calendar= Calendar.getInstance ...
- 【Java】List遍历时删除元素的正确方式
当要删除ArrayList里面的某个元素,一不注意就容易出bug.今天就给大家说一下在ArrayList循环遍历并删除元素的问题.首先请看下面的例子: import java.util.ArrayLi ...
- spring mvc 启动过程及源码分析
由于公司开源框架选用的spring+spring mvc + mybatis.使用这些框架,网上都有现成的案例:需要那些配置文件.每种类型的配置文件的节点该如何书写等等.如果只是需要项目能够跑起来,只 ...
- unity can't add the script behaviour CallbackExecutor. The script needs ...
记一次Unity3D小问题 当我打开VS2017编辑完C#脚本,要将脚本拖到一个3D组件上时,发生了以下错误 unity can't add the script behaviour Callback ...
- Git:五、操作远程仓库
0.一般流程 1)自己新写:GitHub创建有README的库 -> clone到本地 2)修改已有:GitHub上fork别人的仓库 -> clone自己账号下的库到本地 1.创建库 右 ...