Ts + React + Mobx 开发移动端控制台

2024-02-15 05:22:22

自从使用 TypeScript 写 H5 小游戏后，就对 Ts 产生了依赖（智能提示以及友好的重构提示），但对于其 Type System 还需要更多的实践。最近开发 H5 小游戏，在移动端调试方面，为求方便没有采用 inspect 的模式。用的是粗暴的 vConsole，用了 vConsole 的一大好处就是移动端可以使用这个功能。只不过，它需要调试时候引入这个模块。并且 vConsole 用法偏向于 C 端开发，小游戏的 C 端开发使用比较舒服，但 B 端的开发就比较难用了。

Ts + React + Mobx 实现移动端控制台

安装依赖

npm install --save vconsole react-vconsole

初始化 vConsole

import * as VConsole from 'vconsole';

const vConsole = new VConsole();

集成到 React 中

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <VConsole />
      </div>
    );
  }
}

export default App;

使用 Mobx 来管理状态

import { observable, action, computed } from 'mobx';

class Store {
  @observable isConsoleOpen = false;

  @action
  toggleConsole() {
    this.isConsoleOpen = !this.isConsoleOpen;
  }

  @computed
  get consoleClassName() {
    return this.isConsoleOpen ? 'vconsole-open' : 'vconsole-closed';
  }
}

const store = new Store();

使用 React 组件来渲染控制台

import React, { Component } from 'react';
import { observer } from 'mobx-react';

@observer
class Console extends Component {
  render() {
    const { store } = this.props;

    return (
      <div className={store.consoleClassName}>
        <VConsole />
      </div>
    );
  }
}

export default Console;

在 App 中使用控制台组件

import React, { Component } from 'react';
import Store from './Store';
import Console from './Console';

class App extends Component {
  render() {
    const store = new Store();

    return (
      <div>
        <Console store={store} />
      </div>
    );
  }
}

export default App;