我正在尝试将mobx添加到现有项目中 . 该项目使用create-react应用程序启动,弹出,然后我在它上面添加了mobx . 到目前为止这是我的商店:
从'mobx'导入{observable,action,computed}
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')
);
然后我试图在Timer组件中引用它:
@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
为参数的函数 .
我究竟做错了什么?
我清除了大部分应用程序逻辑以保持示例简单 . 如果缺少任何需要帮助的信息,请告诉我,我会更新问题 .
1 回答
基本上忘记在应用启动时创建新商店 . 所以这是我的index.js: