如何在React类组件中获取基于useLocalObservable构建的函数式MobX Store？

好问题！既然类组件没法用Hook，我们可以借助React Context的类组件兼容特性来获取你用useLocalObservable创建的MobX Store，这里有两种实用的方法：

方法一：使用StoreContext.Consumer #

你可以通过StoreContext.Consumer组件包裹类组件的内容，在回调函数中拿到store实例，然后在render逻辑中直接使用：

import React from 'react';
import { observer } from 'mobx-react';
import { StoreContext } from './path/to/your/store/file';

// 务必用observer包裹组件，确保响应store的状态变化
@observer
class MyClassComponent extends React.Component {
  render() {
    return (
      <StoreContext.Consumer>
        {({ testStore }) => {
          // 在这里直接调用testStore的属性和方法
          return (
            <div>
              <h3>当前Store值：{testStore.counter}</h3>
              <button onClick={() => testStore.increment()}>点击增加</button>
            </div>
          );
        }}
      </StoreContext.Consumer>
    );
  }
}

export default MyClassComponent;

这种方法的优势是支持同时消费多个Context，如果你后续扩展了多个store，依然能灵活适配。

方法二：使用static contextType #

如果你的组件只需要消费这一个Root Store Context，这种方法会更简洁——通过在类上声明static contextType，你可以在组件的任何地方（包括生命周期方法）通过this.context直接访问store：

import React from 'react';
import { observer } from 'mobx-react';
import { StoreContext } from './path/to/your/store/file';

@observer
class MyClassComponent extends React.Component {
  // 绑定Context类型
  static contextType = StoreContext;

  componentDidMount() {
    // 生命周期中也能轻松调用store方法
    this.context.testStore.initData();
  }

  render() {
    const { testStore } = this.context;
    return (
      <div>
        <h3>当前Store值：{testStore.counter}</h3>
        <button onClick={() => testStore.increment()}>点击增加</button>
      </div>
    );
  }
}

export default MyClassComponent;

关键注意点 #

• 无论用哪种方法，都要用observer装饰器或高阶组件包裹类组件，否则组件不会响应MobX Store的状态变化，无法自动重新渲染。
• 确保你的类组件被包裹在StoreProvider内部，否则会拿到空的context，触发你之前定义的错误逻辑。

内容的提问来源于stack exchange，提问作者Ernest Trachuk