关于react.js:React-Mobx-基础使用01

38次阅读

共计 1144 个字符，预计需要花费 3 分钟才能阅读完成。

组件通信

props
context
redux mobox
任意组件间的数据通信

### mobx

会有一个独自的 js 文件进行治理
父组件数据注入 Provider

子组件（任意组件）

装置
yarn add mobx
npm install mobx –save
1. 有一个包

引入 mobx-react 应用 Provider
引入 store.js 中的文件（可能是多个）
new Store()
增加 – 引入一个新的 store
- stores={
newStore:new NewStore()，
}
应用 Provider 注入 {…stores}

### 报错

因为 mobx 不反对 @语法所以会报错

// import {observable, computed, action} from 'mobx';
3 | class Store {
> 4 |   @observable tradeCfg = {
  |   ^
5 |     'sadf': 'sadf'
6 |   };
7 |   @observable baseInfo = {};

<!-- 解决方案：yarn add @babel/plugin-proposal-decorators
  yarn add @babel/plugin-proposal-class-properties
 -->

解决办法
```
-  1：
```
yarn add @babel/plugin-proposal-decorators
yarn add @babel/plugin-proposal-class-properties
```
-  2：在 package.json 中 找到 babel 下的  presets 替换代码
```

    
      "presets": [["react-app"],
        ["@babel/preset-react"]
    ],
    "plugins": [["@babel/plugin-proposal-decorators", {"legacy": true}],
        ["@babel/plugin-proposal-class-properties", { "loose" : true}]
    ]

类组件
须要的子页面应用

import {withRouter} from ‘react-router-dom’;//1. 引入

import {observer,inject} from ‘mobx-react’;

import {observer, inject} from ‘mobx-react’;

在类组件的下面

// 1. 引入须要的模块
  import {withRouter} from 'react-router-dom';//1. 引入
  import {observer, inject} from 'mobx-react';
//2. 应用引入的模块
  @withRouter
  @inject('FirstStore',)// 多个之前须要，号隔开
  @observer