我正在尝试将MOBX添加到现有项目中。该项目是用Create-React-React-App Bootstranded弹出的,然后在其顶部添加了MOBX。到目前为止,这是我的商店:
import {可观察,动作,计算}从'mobx'
export default class timerStore {
@observable message = 'THIS IS FROM THE STORE'
constructor(count, message) {
this.message = message;
}
}
我将商店传递到索引组件中的应用程序:
render(
(<Provider timerStore={timerStore}>
<Router history={hashHistory}>
<Route component={Main} path="/">
<IndexRoute component={Tea}/>
<Route component={About} path="/about"/>
<Route component={Timer} path="/timer"/>
</Route>
</Router>
</Provider>
),
document.querySelector('#root')
);
然后我尝试在计时器组件中引用它:
@inject("timerStore")
@observer
class Timer extends Component {
render() {
const { message } = this.props.timerStore
return(
<div className="content-card timer-card">
<h1 className="title">Tea timer {message}</h1>
</div>
)
}
}
export default Timer;
但是没有显示消息字符串,当我在调试器中检查它(this.props.timerStore.message
(时,它显示为未定义。
它也将this.props.timerStore
显示为以count
,message
为参数的函数。
我在做什么错?
我清除了大部分应用程序逻辑,以使示例简单。如果缺少在这里提供帮助的任何信息,请告诉我,我将更新问题。
基本上忘记了在启动应用程序时创建新商店。所以这是我的index.js:
import React from 'react';
import {render} from 'react-dom';
import {hashHistory, Router, Route, IndexRoute} from 'react-router';
import { Provider } from 'mobx-react';
import timerStore from './Stores/timerStore';
import './reset.css';
import Main from './Main/Main.component';
import Tea from './Tea/Tea.component';
import About from './About/About.component';
import Timer from './Timer/Timer.component';
const store = new timerStore()
render(
(<Provider timerStore={store}>
<Router history={hashHistory}>
<Route component={Main} path="/">
<IndexRoute component={Tea}/>
<Route component={About} path="/about"/>
<Route component={Timer} path="/timer"/>
</Route>
</Router>
</Provider>
),
document.querySelector('#root')
);