如何使用mobx反应的“观察员”没有修饰语法？

Question

我试图鞋拔mobx到我与制作VR应用反应过来360.我试着使用修饰语法，但浪费时间的固体块试图实现它后，我决定用nondecorator语法。下面是我从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);

注意在observer类Timer声明。该文件指出这一点。

请注意，使用@Observer作为装饰是可选的，观察者（类Timer ... {}）实现了完全一样的。

这将是实现Timer的正确方法是什么？

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

Answer 1

关于该代码段已添加，我不知道它是否是一个有效的办法或没有，但这里是我使用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));