如何在没有装饰器语法的情况下使用 mobx-react 'observer'？

Question

我正在尝试将 mobx 插入我正在使用 react 360 制作的 vr 应用程序中。我尝试使用装饰器语法，但在浪费了大量时间尝试实现它之后，我决定使用非装饰器语法。这是我从 mobx 文档中遇到的一个示例，我对此有疑问。代码如下：

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
    }
};

ReactDOM.render(<Timer timerData={timerData} />, document.body);

注意 Timer 类上的 observer 声明。文档说明了这一点。

注意，使用@observer 作为装饰器是可选的，observer(class Timer ... { }) 实现完全相同。

这是实现Timer的正确方法吗？

observer(class Timer extends React.Component {
  render() {
    return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
  }
}) 

Answer 1

关于你添加的代码 sn-p 我不知道它是否是一种有效的方式，但这是我在我的应用程序项目中使用没有装饰器语法的 MobX 的方式：

创建您的 MobX 商店，例如 MyStore.js，如下所示：

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

export default class MyStore {
    storeMap = observable(new Map());
    storeArray = observable([]);
    storeBoolean = false

    get storeMapSize() {
        return this.storeMap.size;
    }

    setStoreBoolean(value) {
        this.storeBoolean = value;
    }
}

decorate(MyStore, {
    storeMap: observable,
    storeArray: observable,
    storeBoolean: observable

    storeMapSize: computed,

    setStoreBoolean: action
});

然后在你的组件中Timer.js:

import {inject, observer} from "mobx-react";

class Timer extends React.Component {
    render() {
        return (<span>value from store: { this.props.myStore.storeMap.get('any_key') } </span> )
    }
}

export default inject('myStore')(observer(Timer));

您可以根据需要创建任意数量的商店，并使用相同的inject 方法将它们全部注入您的组件，并通过this.props 以相同的方式使用它们，例如

export default inject('myStore', 'anotherStore', 'anotherNewStore')(observer(Timer));