我正在尝试将 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
作为参数的函数。
我究竟做错了什么?
我清除了大部分应用程序逻辑以保持示例简单。如果缺少任何需要帮助的信息,请告诉我,我会更新问题。