乐趣区

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

组件通信

  1. props
  2. context
  3. redux mobox
    任意组件间的数据通信

### mobx

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

子组件(任意组件)

  1. 装置
    yarn add mobx
    npm install mobx –save

    1. 有一个包

父级的入口治理

  1. 引入 mobx-react 应用 Provider
  2. 引入 store.js 中的文件(可能是多个)
    new Store()

    增加 – 引入一个新的 store

    • stores={

    newStore:new NewStore(),
    }

  3. 应用 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. 解决办法

    -  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}]
    ]

如何在页面中应用 mobx 数据

  1. 类组件
    须要的子页面应用

    1. import {withRouter} from ‘react-router-dom’;//1. 引入
    2. import {observer,inject} from ‘mobx-react’;
    3. 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
    
    1. 从 this.props 上解构应用
  2. 函数组件
退出移动版