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 装饰器语法配置的更多相关文章

  1. 关于Mobx中装饰器语法的环境配置

    1.弹出项目配置 npm run eject 此处注意,若弹出项目配置失败,请先执行以下两行代码(若没有安装git则请跳过,本人是在安装git的情况下解决问题的) 1.git add . 2.git ...

  2. create-react-app 构建的项目使用 mobx (说到底就是为了使用装饰器语法对 babel 做些配置

    在 create-react-app 命令行构建的 React 项目中使用 Mobx 会出现如下警告: Support for the experimental syntax 'decorators- ...

  3. redux VS mobx (装饰器配合使用)

    前言:redux和mobx都是状态管理器,避免父级到子级再到子子级嵌套单向数据流,可以逻辑清晰的管理更新共享数据.(刷新页面redux储蓄数据即消失) 配置使用装饰器(使用高阶函数包装你的组件): n ...

  4. React支持装饰器

    在用mobx时用到了装饰器,无奈环境不支持装饰器,搜索了半天,网上教程乱七八糟,最后想到了babel官网上肯定有,一搜果然有,安装教程 见Babel官网. 最快捷的教程是官网文档

  5. 在react中用装饰器来装饰connect

    假设我们在react中有如下header组件: import React, { PureComponent } from 'react'; import { connect } from 'react ...

  6. python装饰器 语法糖

    简介: 装饰器(Decorators)是 Python 的一个重要部分.简单地说:他们是修改其他函数的功能的函数. 比如说我们写flask,路由就是用装饰器定义的.如果写权限控制,那么权限控制一般也是 ...

  7. 解决用creact-react-app新建React项目不支持 mobx装饰器模式导致报错问题 。

    创建react项目 create-react-app mobx-demo cd my-app npm run start 使用react-app-rewired npm install customi ...

  8. react withClamp装饰器

    Clamp.js 等待异步数据加载完后在初始化$clamp withClamp.js import React, { Component } from "react"; expor ...

  9. python装饰器语法

    @就是decorator,早Python的高效开发中会用到,当然和java的annotation有一定的相似,但又不完全相同,看这篇文章:https://blog.csdn.net/zkp_987/a ...

随机推荐

  1. 如何理解Minkowski不等式

    [转载请注明出处]http://www.cnblogs.com/mashiqi 2017/02/16 Minkowski不等式: 设$f$是$\mathbb{R}^n \times \mathbb{R ...

  2. PHP 框架

    LARAVEL/LUMEN,  CI  ,THINKPHP, YII ,SYMFONY YAF, PHALCON ,ICE FRAMEWORK

  3. js barcode 打印

    新建 html <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=&quo ...

  4. Tomcat报异常:Too many open files 的解决之路

    http://www.linuxeye.com/Linux/2781.html Tomcat报 Jul 21, 2015 8:45:23 AM org.apache.tomcat.util.net.J ...

  5. 如何在Python中使用ZeroMQ和Docker构建微服务架构

    @Container容器技术大会将于6月4日在上海光大会展中心国际大酒店举办,来自携程.PPTV.蚂蚁金服.京东.浙江移动.海尔电器.唯品会.eBay.道富银行.麻袋理财等公司的技术负责人将带来实践经 ...

  6. 缓存与数据库一致性之三:缓存穿透、缓存雪崩、key重建方案

    一.缓存穿透预防及优化 缓存穿透是指查询一个根本不存在的数据,缓存层和存储层都不会命中,但是出于容错的考虑,如果从存储层查不到数据则不写入缓存层,如图 11-3 所示整个过程分为如下 3 步: 缓存层 ...

  7. .gitlab-ci.yml 配置文件,知识点

    官方介绍:https://docs.gitlab.com/ee/ci/yaml/README.html 翻译: https://segmentfault.com/a/1190000010442764

  8. py-day3-5 python 函数式编程

    # 函数式(方程式 y = 2*x+1) def calc(x): return 2*x+1 print('得出的结果:',calc(6)) 得出的结果: 13 # 面向过程 def calc(x): ...

  9. Ubuntu更新时提示错误 E: Sub-process /usr/bin/dpkg returned an error code (1)

    $ sudo su //root权限 $ sudo mv /var/lib/dpkg/info /var/lib/dpkg/info_old //现将info文件夹更名 $ sudo mkdir /v ...

  10. 读取 exe dll 自定义config 文件

    ExeConfigurationFileMap map = new ExeConfigurationFileMap(); map.ExeConfigFilename = GPARAM._configF ...