[英]How to use mobx-react 'observer' without decorator syntax?
我试图鞋拔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);
注意Timer
类的observer
声明。 文档说明了这一点。
请注意,使用@observer作为装饰器是可选的,observer(类Timer ... {})实现完全相同。
这是实现Timer
的正确方法吗?
observer(class Timer extends React.Component {
render() {
return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )
}
})
关于你添加的代码片段,我不知道它是否是一种有效的方法,但这是我在我的应用程序项目中使用没有装饰器语法的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));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.