react mobx 装饰器语法配置
1.弹出项目配置 npm run eject
此处注意,若弹出项目配置失败,请先执行以下两行代码(我的项目执行上一句都会报错,所以都会执行) 1.git add .
2.git commit -m "init"
2.安装装饰器所需依赖 npm install --save-dev babel-plugin-transform-decorators-legacy
3.安装应用配置 npm install @babel/plugin-proposal-decorators 4.安装mobx和mobx-react 1.npm install mobx --save
2.npm install mobx-react 5.配置package.json(直接在最下方加上就行) "babel"{
"plugins":[
[
"@babel/plugin-proposal-decorators",
{
"legacy":true
}
],
[
"@babel/plugin-proposal-class-properties",
{
"loose":true
}
]
],
"presets":[
"react-app"
]
},
6.环境测试 1.新建store.js模拟本地数据库
import {observable,action} from "mobx";
class Store {
id = Math.random();
@observable title="飞飞";
@observable finished = false;
@action cTitle =()=>{
this.title="麦扣扣"
}
}
export default new Store()
2.新建App.js进行调用 import React, { Component } from 'react';
import Store from "./store";
import {observer} from "mobx-react" @observer
class App extends Component {
render() {
return (
<div>
this is Index
<p>{Store.id}</p>
<p>{Store.title}</p>
<button onClick={Store.cTitle}>测试</button>
</div>
);
}
}
export default App;
注:转自https://www.cnblogs.com/ygxdbmx/p/9845241.html
搞了好久终于可以了,记录一下
react mobx 装饰器语法配置的更多相关文章
- 关于Mobx中装饰器语法的环境配置
1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(若没有安装git则请跳过,本人是在安装git的情况下解决问题的) 1.git add . 2.git ...
- create-react-app 构建的项目使用 mobx (说到底就是为了使用装饰器语法对 babel 做些配置
在 create-react-app 命令行构建的 React 项目中使用 Mobx 会出现如下警告: Support for the experimental syntax 'decorators- ...
- redux VS mobx (装饰器配合使用)
前言:redux和mobx都是状态管理器,避免父级到子级再到子子级嵌套单向数据流,可以逻辑清晰的管理更新共享数据.(刷新页面redux储蓄数据即消失) 配置使用装饰器(使用高阶函数包装你的组件): n ...
- React支持装饰器
在用mobx时用到了装饰器,无奈环境不支持装饰器,搜索了半天,网上教程乱七八糟,最后想到了babel官网上肯定有,一搜果然有,安装教程 见Babel官网. 最快捷的教程是官网文档
- 在react中用装饰器来装饰connect
假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...
- python装饰器 语法糖
简介: 装饰器(Decorators)是 Python 的一个重要部分.简单地说:他们是修改其他函数的功能的函数. 比如说我们写flask,路由就是用装饰器定义的.如果写权限控制,那么权限控制一般也是 ...
- 解决用creact-react-app新建React项目不支持 mobx装饰器模式导致报错问题 。
创建react项目 create-react-app mobx-demo cd my-app npm run start 使用react-app-rewired npm install customi ...
- react withClamp装饰器
Clamp.js 等待异步数据加载完后在初始化$clamp withClamp.js import React, { Component } from "react"; expor ...
- python装饰器语法
@就是decorator,早Python的高效开发中会用到,当然和java的annotation有一定的相似,但又不完全相同,看这篇文章:https://blog.csdn.net/zkp_987/a ...
随机推荐
- JavaScript常见的继承方式
原型链机制: 在ECMAscript中描述了原型链的概念,并将原型链作为实现继承的主要方法,其基本思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法. 构造函数和原型还有实例之间的关系: 每 ...
- JVM垃圾回收算法解析
JVM垃圾回收算法解析 标记-清除算法 该算法为最基础的算法.它分为标记和清除两个阶段,首先标记出需要回收的对象,在标记结束后,统一回收.该算法存在两个问题:一是效率问题,标记和清除过程效率都不太高, ...
- SQL 优化经历
一次非常有趣的 SQL 优化经历 阅读本文大概需要 6 分钟. 前言 在网上刷到一篇数据库优化的文章,自己也来研究一波. 场景 数据库版本:5.7.25 ,运行在虚拟机中. 课程表 #课程表 cr ...
- PythonStudy——第一阶段性测试
1.Python解释器,在2.x和3.x上分别采用的是什么默认编码8 2.定义字符串变量时,单引号,双引号,三引号什么区别? 3.编程语言可以分为哪三类,特点都是什么 4.定义一个变量有三个特性, 5 ...
- telnet服务搭建
Telnet服务器安装(centos7系统环境) 查看系统是否已安装telnet rpm -qa | grep telnettelnet-0.17-48.el6.x86_64telnet-server ...
- oracle-logminer
LogMiner工具实际上是由两个新的PL/SQL内建包((DBMS_LOGMNR 和 DBMS_ LOGMNR_D)和四个V$动态性能视图(视图是在利用过程DBMS_LOGMNR.START_LOG ...
- Ubuntu 下解压tar.xz方法
参考地址:https://www.cnblogs.com/baby123/p/6611169.html
- 图的遍历——DFS和BFS模板(一般的图)
关于图的遍历,通常有深度优先搜索(DFS)和广度优先搜索(BFS),本文结合一般的图结构(邻接矩阵和邻接表),给出两种遍历算法的模板 1.深度优先搜索(DFS) #include<iostrea ...
- 前端-JavaScript1-1——JavaScript简介
1.1 JavaScript用途 前端三层: 结构层 HTML 从语义的角度描述页面的结构 样式层 CSS 从审美的角度装饰页面 行为层 J ...
- 廖雪峰Java6 IO编程-2input和output-6classpath资源
1.从classpath读取文件可以避免不同环境下文件路径不一致的问题. Windows和Linux关于路径的表示不一致 Windows:C:\conf\default.properties Linu ...